commit d868a8573545de54920e79d9e4ecfbb42cc7b4f2 Author: ❄ Fleur de Blue Date: Mon Apr 14 20:57:23 2025 +0800 Calculator diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1c6071 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + Calculator + + + + +
+ +
+
+ + +
+
+ + + + +
+ +
+ + + +
+
+

Result:

+
+ +
+
+
+

HISTORY

+
+ +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..de662cf --- /dev/null +++ b/index.js @@ -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 + + `
  • ${history_list[history_list.length - 1].toString()}
    • `; + 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; + } + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..4a1754c --- /dev/null +++ b/style.css @@ -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; +}