Calculator

Here's a simple calculator app with HTML, CSS, and JavaScript: Calculator

.calculator { width: 300px; margin: 50px auto; padding: 20px; border-radius: 10px; background-color: #333; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .display { padding: 15px; margin-bottom: 20px; background-color: #222; border-radius: 5px; text-align: right; } .previous-operand { color: rgba(255, 255, 255, 0.7); min-height: 20px; font-size: 16px; } .current-operand { color: white; font-size: 28px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { padding: 15px; border: none; border-radius: 5px; font-size: 20px; background-color: #555; color: white; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #777; } button[data-type="operation"] { background-color: #ff9500; } button[data-type="operation"]:hover { background-color: #ffb143; } .span-2 { grid-column: span 2; } button[data-type="clear"], button[data-type="delete"] { background-color: #a5a5a5; color: black; } button[data-type="clear"]:hover, button[data-type="delete"]:hover { background-color: #c9c9c9; } class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement; this.currentOperandTextElement = currentOperandTextElement; this.clear(); } clear() { this.currentOperand = '0'; this.previousOperand = ''; this.operation = undefined; } delete() { this.currentOperand = this.currentOperand.toString().slice(0, -1); if (this.currentOperand === '') { this.currentOperand = '0'; } } appendNumber(number) { if (number === '.' && this.currentOperand.includes('.')) return; this.currentOperand = this.currentOperand === '0' && number !== '.' ? number.toString() : this.currentOperand.toString() + number.toString(); } chooseOperation(operation) { if (this.currentOperand === '0') return; if (this.previousOperand !== '') { this.compute(); } this.operation = operation; this.previousOperand = this.currentOperand + ` ${operation}`; this.currentOperand = '0'; } compute() { let computation; const prev = parseFloat(this.previousOperand); const current = parseFloat(this.currentOperand); if (isNaN(prev) || isNaN(current)) return; switch (this.operation) { case '+': computation = prev + current; break; case '-': computation = prev - current; break; case '×': computation = prev * current; break; case '÷': computation = prev / current; break; default: return; } this.currentOperand = computation; this.operation = undefined; this.previousOperand = ''; } updateDisplay() { this.currentOperandTextElement.innerText = this.currentOperand; this.previousOperandTextElement.innerText = this.previousOperand; } } const numberButtons = document.querySelectorAll('[data-type="number"]'); const operationButtons = document.querySelectorAll('[data-type="operation"]'); const equalsButton = document.querySelector('[data-type="equals"]'); const deleteButton = document.querySelector('[data-type="delete"]'); const clearButton = document.querySelector('[data-type="clear"]'); const previousOperandTextElement = document.getElementById('previous-operand'); const currentOperandTextElement = document.getElementById('current-operand'); const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement); numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.innerText); calculator.updateDisplay(); }); }); operationButtons.forEach(button => { button.addEventListener('click', () => { calculator.chooseOperation(button.innerText); calculator.updateDisplay(); }); }); equalsButton.addEventListener('click', button => { calculator.compute(); calculator.updateDisplay(); }); clearButton.addEventListener('click', button => { calculator.clear(); calculator.updateDisplay(); }); deleteButton.addEventListener('click', button => { calculator.delete(); calculator.updateDisplay(); });