Simple Calculator

:root { --bg: #282c34; --panel: #3b3f46; --accent: #ffb86b; --btn: #e6e6e6; --btn-dark: #d1d1d1; --text: #ffffff; --shadow: rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; font-family: Inter, Roboto, "Segoe UI", Arial, sans-serif; } html, body { height: 100%; margin: 0; background: linear-gradient(180deg, #1f2430 0%, #15171b 100%); color: var(--text); display: flex; align-items: center; justify-content: center; padding: 24px; } .calculator { width: 360px; max-width: 100%; background: var(--panel); border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px var(--shadow); } .display { background: rgba(0,0,0,0.15); padding: 12px; border-radius: 8px; text-align: right; margin-bottom: 12px; min-height: 72px; display: flex; flex-direction: column; justify-content: center; word-wrap: break-word; } .previous-operand { font-size: 14px; opacity: 0.8; color: #cfcfcf; min-height: 18px; } .current-operand { font-size: 32px; font-weight: 600; line-height: 1; margin-top: 6px; min-height: 34px; } .buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } button { height: 56px; border-radius: 8px; border: none; background: var(--btn); color: #111; font-size: 18px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.25); transition: transform 0.06s ease, box-shadow 0.06s ease; } button:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); } button[data-operation] { background: linear-gradient(180deg, #ffda9e, #ffb86b); color: #111; font-weight: 600; } button[data-equals] { background: linear-gradient(180deg, #6be6ff, #33cfff); color: #022; grid-row: span 1; font-weight: 700; } .span-two { grid-column: span 2; } @media (max-width: 420px) { .calculator { width: 100%; } button { height: 52px; font-size: 16px; } .current-operand { font-size: 28px; } } export default class Calculator { constructor() { this.clear(); } clear() { this.current = ''; this.previous = ''; this.operation = null; } delete() { this.current = this.current.toString().slice(0, -1); } appendNumber(number) { if (number === '.' && this.current.includes('.')) return; if (number === '0' && this.current === '0') return; this.current = this.current.toString() + number.toString(); } toggleNegate() { if (!this.current) return; if (this.current.startsWith('-')) { this.current = this.current.slice(1); } else { this.current = '-' + this.current; } } chooseOperation(operation) { if (this.current === '' && this.previous === '') return; if (this.current === '' && this.previous !== '') { // allow change of operation this.operation = operation; return; } if (this.previous !== '') { this.compute(); } this.operation = operation; this.previous = this.current; this.current = ''; } compute() { const prev = parseFloat(this.previous); const curr = parseFloat(this.current); if (isNaN(prev) || isNaN(curr)) return; let computation = null; switch (this.operation) { case '+': computation = prev + curr; break; case '-': computation = prev - curr; break; case '*': computation = prev * curr; break; case '/': computation = curr === 0 ? NaN : prev / curr; break; default: return; } this.current = String(computation); this.operation = null; this.previous = ''; } getDisplayNumbers() { return { current: this.current === '' ? '0' : this.formatNumber(this.current), previous: this.operation && this.previous !== '' ? `${this.formatNumber(this.previous)} ${this.operation}` : '', }; } formatNumber(numberStr) { const num = Number(numberStr); if (!isFinite(num)) return 'Error'; const [integerPart, decimalPart] = numberStr.split('.'); const intDisplay = parseInt(integerPart, 10).toLocaleString(); if (decimalPart != null) { return `${intDisplay}.${decimalPart}`; } return intDisplay; } } import Calculator from './calculator.js'; const numberButtons = document.querySelectorAll('[data-number]'); const operationButtons = document.querySelectorAll('[data-operation]'); const equalsButton = document.querySelector('[data-equals]'); const deleteButton = document.querySelector('[data-delete]'); const allClearButton = document.querySelector('[data-all-clear]'); const negateButton = document.querySelector('[data-negate]'); const previousOperandText = document.getElementById('previous-operand'); const currentOperandText = document.getElementById('current-operand'); const calculator = new Calculator(); function updateDisplay() { const { current, previous } = calculator.getDisplayNumbers(); currentOperandText.textContent = current; previousOperandText.textContent = previous; } numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.textContent); updateDisplay(); }); }); operationButtons.forEach(button => { button.addEventListener('click', () => { const symbol = button.textContent; const opMap = { '+': '+', '-': '-', '×': '*', '÷': '/' }; calculator.chooseOperation(opMap[symbol]); updateDisplay(); }); }); equalsButton.addEventListener('click', button => { calculator.compute(); updateDisplay(); }); allClearButton.addEventListener('click', button => { calculator.clear(); updateDisplay(); }); deleteButton.addEventListener('click', button => { calculator.delete(); updateDisplay(); }); negateButton.addEventListener('click', () => { calculator.toggleNegate(); updateDisplay(); }); // Keyboard support window.addEventListener('keydown', e => { if ((e.key >= '0' && e.key <= '9') || e.key === '.') { calculator.appendNumber(e.key); updateDisplay(); return; } if (e.key === '+' || e.key === '-') { calculator.chooseOperation(e.key); updateDisplay(); return; } if (e.key === '*' || e.key === 'x' || e.key === 'X') { calculator.chooseOperation('*'); updateDisplay(); return; } if (e.key === '/' ) { calculator.chooseOperation('/'); updateDisplay(); return; } if (e.key === 'Enter' || e.key === '=') { e.preventDefault(); calculator.compute(); updateDisplay(); return; } if (e.key === 'Backspace') { calculator.delete(); updateDisplay(); return; } if (e.key === 'Escape') { calculator.clear(); updateDisplay(); return; } }); // initialize updateDisplay(); # Simple Calculator Open index.html in a browser (double-click or serve with any static server).