├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const currDisplay = document.querySelector(".curr-display"); 2 | const prevDisplay = document.querySelector(".prev-display"); 3 | const numbers = document.querySelectorAll(".number"); 4 | const operands = document.querySelectorAll(".operation"); 5 | const clearBtn = document.querySelector(".clear"); 6 | const delBtn = document.querySelector(".delete"); 7 | const equalBtn = document.querySelector(".equal"); 8 | let operation; 9 | 10 | function appendNumber(number) { 11 | if (number === "." && currDisplay.innerText.includes(".")) return; 12 | currDisplay.innerText += number; 13 | } 14 | 15 | function chooseOperation(operand) { 16 | if (currDisplay.innerText === "") return; 17 | compute(operand); 18 | operation = operand; 19 | currDisplay.innerText += operand; 20 | prevDisplay.innerText = currDisplay.innerText; 21 | currDisplay.innerText = ""; 22 | } 23 | 24 | function clearDisplay() { 25 | currDisplay.innerText = ""; 26 | prevDisplay.innerText = ""; 27 | } 28 | 29 | function compute(operand) { 30 | let result; 31 | const previousValue = parseFloat(prevDisplay.innerText); 32 | const currentValue = parseFloat(currDisplay.innerText); 33 | 34 | if (isNaN(previousValue) || isNaN(currentValue)) return; 35 | 36 | switch (operation) { 37 | case "+": 38 | result = previousValue + currentValue; 39 | break; 40 | case "-": 41 | result = previousValue - currentValue; 42 | break; 43 | case "*": 44 | result = previousValue * currentValue; 45 | break; 46 | case "/": 47 | result = previousValue / currentValue; 48 | break; 49 | default: 50 | return; 51 | } 52 | currDisplay.innerText = result; 53 | } 54 | 55 | numbers.forEach((number) => { 56 | number.addEventListener("click", () => { 57 | appendNumber(number.innerText); 58 | }); 59 | }); 60 | 61 | operands.forEach((operand) => { 62 | operand.addEventListener("click", () => { 63 | chooseOperation(operand.innerText); 64 | }); 65 | }); 66 | 67 | clearBtn.addEventListener("click", () => { 68 | clearDisplay(); 69 | }); 70 | 71 | equalBtn.addEventListener("click", () => { 72 | compute(); 73 | prevDisplay.innerText = ""; 74 | }); 75 | 76 | delBtn.addEventListener("click", () => { 77 | currDisplay.innerText = currDisplay.innerText.slice(0, -1); 78 | }); 79 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | background-color: #a0d7ff; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .calculator { 19 | display: grid; 20 | grid-template-rows: 21 | minmax(80px, auto) 22 | repeat(5, 60px); 23 | grid-template-columns: repeat(4, 60px); 24 | justify-content: center; 25 | background-color: hsl(220, 6%, 10%); 26 | padding: 1.4rem; 27 | border-radius: 12px; 28 | gap: 0.7rem; 29 | } 30 | .calculator button { 31 | border: none; 32 | font-family: inherit; 33 | font-size: 1.3rem; 34 | font-weight: 500; 35 | color: hsl(204, 100%, 58%); 36 | background-color: hsl(230, 6%, 20%); 37 | border-radius: 10px; 38 | cursor: pointer; 39 | } 40 | .calculator button:hover { 41 | background-color: hsl(230, 6%, 30%); 42 | } 43 | .span-2 { 44 | grid-column: span 2; 45 | } 46 | .calculator > .output { 47 | font-size: 2rem; 48 | background-color: inherit; 49 | color: white; 50 | grid-column: 1 / -1; 51 | display: flex; 52 | flex-direction: column; 53 | justify-content: space-around; 54 | align-items: flex-end; 55 | word-break: break-all; 56 | border-radius: inherit; 57 | } 58 | 59 | .output .prev-display { 60 | font-size: 1.3rem; 61 | font-weight: 400; 62 | color: hsl(0, 0%, 65%); 63 | } 64 | --------------------------------------------------------------------------------