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