Calculator

I'll create a simple calculator app using HTML, CSS, and JavaScript. Calculator

body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .calculator { background-color: #333; border-radius: 10px; padding: 20px; width: 300px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .display { background-color: #444; color: white; padding: 20px; border-radius: 5px; margin-bottom: 20px; text-align: right; word-wrap: break-word; } .previous-operand { font-size: 1rem; color: rgba(255, 255, 255, 0.7); min-height: 20px; } .current-operand { font-size: 2rem; margin-top: 5px; } button { width: 60px; height: 60px; border: none; border-radius: 5px; margin: 5px; font-size: 1.2rem; cursor: pointer; background-color: #666; color: white; transition: background-color 0.2s; } button:hover { background-color: #777; } button:active { background-color: #555; } .span-two { width: 130px; } [data-action="operation"] { background-color: #ff9500; } [data-action="operation"]:hover { background-color: #ffaa33; } [data-action="operation"]:active { background-color: #cc7700; } [data-action="clear"], [data-action="delete"] { background-color: #a5a5a5; color: #333; } [data-action="clear"]:hover, [data-action="delete"]:hover { background-color: #b5b5b5; } [data-action="clear"]:active, [data-action="delete"]:active { background-color: #959595; } 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 if (this.currentOperand === '0' && number !== '.') { this.currentOperand = number } else { this.currentOperand = this.currentOperand.toString() + number.toString() } } chooseOperation(operation) { if (this.currentOperand === '') return if (this.previousOperand !== '') { this.compute() } this.operation = operation this.previousOperand = this.currentOperand this.currentOperand = '' } 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 if (this.operation != null) { this.previousOperandTextElement.innerText = `${this.previousOperand} ${this.operation}` } else { this.previousOperandTextElement.innerText = '' } } } const numberButtons = document.querySelectorAll('[data-number]') const operationButtons = document.querySelectorAll('[data-action="operation"]') const equalsButton = document.querySelector('[data-action="calculate"]') const deleteButton = document.querySelector('[data-action="delete"]') const allClearButton = document.querySelector('[data-action="clear"]') const previousOperandTextElement = document.querySelector('.previous-operand') const currentOperandTextElement = document.querySelector('.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', () => { calculator.compute() calculator.updateDisplay() }) allClearButton.addEventListener('click', () => { calculator.clear() calculator.updateDisplay() }) deleteButton.addEventListener('click', () => { calculator.delete() calculator.updateDisplay() })