diff --git a/calculator/index.html b/calculator/index.html index 0668c76..e3cfe19 100644 --- a/calculator/index.html +++ b/calculator/index.html @@ -3,8 +3,6 @@ - - - + - - - + + + - - - + + + - - - + + + - - + + + diff --git a/calculator/script.js b/calculator/script.js new file mode 100644 index 0000000..ad7472e --- /dev/null +++ b/calculator/script.js @@ -0,0 +1,83 @@ +const display = document.querySelector("#display"); +let previousNumber = 0; +let lastOperation = ""; + +function doOperation(operation, numA, numB) { + numA = Number(numA); + numB = Number(numB); + switch (operation) { + case "+": + return numA + numB; + break; + } +} + +//Set numbers logic +const numbers = document.querySelectorAll(".number"); + +numbers.forEach((number) => { + number.addEventListener("click", (event) => { + updateDisplay(event.target.innerText); + }); +}); + +function updateDisplay(number) { + let currentResult = display.value; + if (currentResult === "0") { + display.value = number; + } else { + display.value += number; + } +} + +function reset() { + display.value = "0"; + previousNumber = "0"; + lastOperation = ""; +} + +// Set clear button +const clearButton = document.querySelector(".clear"); +clearButton.addEventListener("click", () => { + reset(); +}); + +// Set backspace button +backspaceButton = document.querySelector(".backspace"); +backspaceButton.addEventListener("click", () => { + let result = display.value; + result = result.slice(0, -1); + if (result.length === 0) { + result = "0"; + } + display.value = result; +}); + +// Operations +const operators = document.querySelectorAll(".operator"); +operators.forEach((operator) => { + operator.addEventListener("click", (event) => { + if (lastOperation) { + previousNumber = doOperation( + lastOperation, + previousNumber, + display.value, + ); + } else { + previousNumber = Number(display.value); + } + + display.value = "0"; + lastOperation = event.target.innerText; + }); +}); + +// Result button +const resultButton = document.querySelector(".result"); +resultButton.addEventListener("click", (event) => { + if (lastOperation) { + display.value = doOperation(lastOperation, previousNumber, display.value); + } +}); + +reset(); diff --git a/calculator/style.css b/calculator/style.css index ce6c905..dd88d1f 100644 --- a/calculator/style.css +++ b/calculator/style.css @@ -52,7 +52,7 @@ button:hover { grid-column: 1 / 3; } -.zero { +.large { grid-column: 1 / 4; }