Compare commits
2 Commits
099995b06b
...
fa0e5dab00
| Author | SHA1 | Date |
|---|---|---|
❄ Fleur de Blue
|
fa0e5dab00
|
3 months ago |
|
❄ Fleur de Blue
|
d868a85735
|
3 months ago |
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title> Calculator </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="header">CALCULATOR</h2>
|
||||||
|
<hr>
|
||||||
|
<div>
|
||||||
|
<input type="number" name="" id="num1">
|
||||||
|
<input type="number" name="" id="num2">
|
||||||
|
</div>
|
||||||
|
<div class="operations">
|
||||||
|
<button type="" id="btn-addition" disabled>+</button>
|
||||||
|
<button type="" id="btn-subtraction" disabled>-</button>
|
||||||
|
<button type="" id="btn-multiplication" disabled>*</button>
|
||||||
|
<button type="" id="btn-division" disabled>/</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="memory-buttons">
|
||||||
|
<button id="store-result">M+</button>
|
||||||
|
<button id="memory-recall">MR</button>
|
||||||
|
<button id="memory-clear">MC</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Result:</h3>
|
||||||
|
<div id="result" class="result">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<h3 style="text-align: center;">HISTORY</h3>
|
||||||
|
<div id="historyList">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="history-actions">
|
||||||
|
<button id="clear-history" disabled>Clear History</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="index.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
let num1 = document.getElementById("num1");
|
||||||
|
let num2 = document.getElementById("num2");
|
||||||
|
|
||||||
|
let result = document.getElementById("result");
|
||||||
|
|
||||||
|
let btnAddition = document.getElementById("btn-addition");
|
||||||
|
let btnSubtraction = document.getElementById("btn-subtraction");
|
||||||
|
let btnMultiplication = document.getElementById("btn-multiplication");
|
||||||
|
let btnDivision = document.getElementById("btn-division");
|
||||||
|
|
||||||
|
let history = document.getElementById("historyList");
|
||||||
|
let history_list = [];
|
||||||
|
let btnClearHistory = document.getElementById("clear-history");
|
||||||
|
|
||||||
|
let btnStore = document.getElementById("store-result");
|
||||||
|
let btnMemoryRecall = document.getElementById("memory-recall");
|
||||||
|
let btnMemoryClear = document.getElementById("memory-clear");
|
||||||
|
|
||||||
|
let memory = null;
|
||||||
|
|
||||||
|
let resultingValue;
|
||||||
|
|
||||||
|
class Operation {
|
||||||
|
constructor(num1, num2, result, operator) {
|
||||||
|
this.num1 = num1;
|
||||||
|
this.num2 = num2;
|
||||||
|
this.result = result;
|
||||||
|
this.operator = operator;
|
||||||
|
}
|
||||||
|
|
||||||
|
toString() {
|
||||||
|
return `${this.num1} ${this.operator} ${this.num2} = ${this.result}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
num1.addEventListener("keyup", function () {
|
||||||
|
checkInputs();
|
||||||
|
});
|
||||||
|
|
||||||
|
num2.addEventListener("keyup", function () {
|
||||||
|
checkInputs();
|
||||||
|
});
|
||||||
|
|
||||||
|
function checkInputs() {
|
||||||
|
if (num1.value == "" || num2.value == "") {
|
||||||
|
btnAddition.disabled = true;
|
||||||
|
btnSubtraction.disabled = true;
|
||||||
|
btnMultiplication.disabled = true;
|
||||||
|
btnDivision.disabled = true;
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
btnAddition.disabled = false;
|
||||||
|
btnSubtraction.disabled = false;
|
||||||
|
btnMultiplication.disabled = false;
|
||||||
|
btnDivision.disabled = false;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkHistory() {
|
||||||
|
if (history.innerHTML != "") {
|
||||||
|
btnClearHistory.disabled = false;
|
||||||
|
} else {
|
||||||
|
btnClearHistory.disabled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function doOperation(operator) {
|
||||||
|
if (checkInputs()) {
|
||||||
|
let num1Value = parseFloat(num1.value);
|
||||||
|
let num2Value = parseFloat(num2.value);
|
||||||
|
let resultValue;
|
||||||
|
|
||||||
|
try {
|
||||||
|
switch (operator) {
|
||||||
|
case "+":
|
||||||
|
resultValue = num1Value + num2Value;
|
||||||
|
break;
|
||||||
|
case "-":
|
||||||
|
resultValue = num1Value - num2Value;
|
||||||
|
break;
|
||||||
|
case "*":
|
||||||
|
resultValue = num1Value * num2Value;
|
||||||
|
break;
|
||||||
|
case "/":
|
||||||
|
if (num2Value === 0) {
|
||||||
|
throw new Error("Division by zero");
|
||||||
|
}
|
||||||
|
resultValue = num1Value / num2Value;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
result.innerHTML = `Result: ${resultValue}`;
|
||||||
|
history_list.push(
|
||||||
|
new Operation(num1Value, num2Value, resultValue, operator)
|
||||||
|
);
|
||||||
|
resultingValue = resultValue;
|
||||||
|
} catch (error) {
|
||||||
|
history_list.push(
|
||||||
|
new Operation(
|
||||||
|
num1Value,
|
||||||
|
num2Value,
|
||||||
|
`Result: Error: ${error.message}`,
|
||||||
|
operator
|
||||||
|
)
|
||||||
|
);
|
||||||
|
result.innerHTML = `Result: Error: ${error.message}`;
|
||||||
|
resultingValue = undefined;
|
||||||
|
} finally {
|
||||||
|
history.innerHTML =
|
||||||
|
history.innerHTML +
|
||||||
|
`<li>${history_list[history_list.length - 1].toString()}</li>`;
|
||||||
|
checkHistory();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btnAddition.addEventListener("click", function () {
|
||||||
|
doOperation("+");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnSubtraction.addEventListener("click", function () {
|
||||||
|
doOperation("-");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnMultiplication.addEventListener("click", function () {
|
||||||
|
doOperation("*");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnDivision.addEventListener("click", function () {
|
||||||
|
doOperation("/");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnStore.addEventListener("click", function () {
|
||||||
|
if (memory == null) {
|
||||||
|
memory = [];
|
||||||
|
}
|
||||||
|
if (resultingValue != undefined) {
|
||||||
|
memory.push(resultingValue);
|
||||||
|
alert(`Stored in memory: ${memory[memory.length - 1]}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
btnMemoryRecall.addEventListener("click", function () {
|
||||||
|
if (memory != null && memory.length > 0) {
|
||||||
|
num1.value = memory.pop();
|
||||||
|
} else {
|
||||||
|
alert("Memory is empty.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
btnMemoryClear.addEventListener("click", function () {
|
||||||
|
memory = null;
|
||||||
|
alert("Memory cleared.");
|
||||||
|
});
|
||||||
|
|
||||||
|
btnClearHistory.addEventListener("click", function () {
|
||||||
|
history_list = [];
|
||||||
|
history.innerHTML = "";
|
||||||
|
checkHistory();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keyup", function (event) {
|
||||||
|
console.log(event.key);
|
||||||
|
if (checkInputs()) {
|
||||||
|
switch (event.key) {
|
||||||
|
case "+":
|
||||||
|
doOperation("+");
|
||||||
|
break;
|
||||||
|
case "-":
|
||||||
|
doOperation("-");
|
||||||
|
break;
|
||||||
|
case "*":
|
||||||
|
doOperation("*");
|
||||||
|
break;
|
||||||
|
case "/":
|
||||||
|
doOperation("/");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
body {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
background: #f0f2f5;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
height: 40px;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 3px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: flex;
|
||||||
|
width: 93%;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"] {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operations,
|
||||||
|
.memory-buttons,
|
||||||
|
.history-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: "Poppins";
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
background: linear-gradient(145deg, #e6e6e6, #ffffff);
|
||||||
|
border: 2px solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover:not(:disabled) {
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
border-color: #007bff;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #aaa;
|
||||||
|
border-color: #ddd;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memory-buttons button,
|
||||||
|
.history-actions button {
|
||||||
|
width: auto;
|
||||||
|
height: 45px;
|
||||||
|
padding: 0 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
#historyList {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue