Calculator

Here's a simple calculator implementation using HTML, CSS, and JavaScript: Calculator

.calculator { border: 1px solid #ccc; border-radius: 5px; width: 400px; margin: 50px auto; padding: 20px; } .calculator-screen { width: 100%; height: 80px; border: none; background-color: #252525; color: #fff; text-align: right; padding-right: 20px; padding-left: 10px; font-size: 4rem; margin-bottom: 15px; } .calculator-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; padding: 20px; } button { height: 60px; font-size: 2rem; border-radius: 3px; border: 1px solid #c4c4c4; background-color: #fff; cursor: pointer; } button:hover { background-color: #eaeaea; } .operator { color: #337cac; } .all-clear { background-color: #f0595f; color: #fff; } .all-clear:hover { background-color: #f17377; } .equal-sign { background-color: #2e86c0; color: #fff; height: 100%; grid-row: 2 / 6; grid-column: 4 / 5; } .equal-sign:hover { background-color: #4e9ed4; } const calculator = { displayValue: '0', firstOperand: null, waitingForSecondOperand: false, operator: null, }; function updateDisplay() { const display = document.querySelector('.calculator-screen'); display.value = calculator.displayValue; } updateDisplay(); document.querySelector('.calculator-keys').addEventListener('click', (event) => { const { target } = event; if (!target.matches('button')) { return; } if (target.classList.contains('operator')) { handleOperator(target.value); updateDisplay(); return; } if (target.classList.contains('decimal')) { inputDecimal(target.value); updateDisplay(); return; } if (target.classList.contains('all-clear')) { resetCalculator(); updateDisplay(); return; } inputDigit(target.value); updateDisplay(); }); function inputDigit(digit) { const { displayValue, waitingForSecondOperand } = calculator; if (waitingForSecondOperand === true) { calculator.displayValue = digit; calculator.waitingForSecondOperand = false; } else { calculator.displayValue = displayValue === '0' ? digit : displayValue + digit; } } function inputDecimal(dot) { if (calculator.waitingForSecondOperand === true) { calculator.displayValue = '0.'; calculator.waitingForSecondOperand = false; return; } if (!calculator.displayValue.includes(dot)) { calculator.displayValue += dot; } } function handleOperator(nextOperator) { const { firstOperand, displayValue, operator } = calculator; const inputValue = parseFloat(displayValue); if (operator && calculator.waitingForSecondOperand) { calculator.operator = nextOperator; return; } if (firstOperand == null && !isNaN(inputValue)) { calculator.firstOperand = inputValue; } else if (operator) { const result = calculate(firstOperand, inputValue, operator); calculator.displayValue = `${parseFloat(result.toFixed(7))}`; calculator.firstOperand = result; } calculator.waitingForSecondOperand = true; calculator.operator = nextOperator; } function calculate(firstOperand, secondOperand, operator) { if (operator === '+') { return firstOperand + secondOperand; } else if (operator === '-') { return firstOperand - secondOperand; } else if (operator === '*') { return firstOperand * secondOperand; } else if (operator === '/') { return firstOperand / secondOperand; } return secondOperand; } function resetCalculator() { calculator.displayValue = '0'; calculator.firstOperand = null; calculator.waitingForSecondOperand = false; calculator.operator = null; }