Simple Calculator

I'll help you create a simple calculator using HTML, CSS, and JavaScript. Simple Calculator

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } .calculator { background-color: #333; border-radius: 10px; padding: 20px; width: 300px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .display { width: 100%; height: 50px; margin-bottom: 20px; font-size: 24px; text-align: right; padding: 5px; box-sizing: border-box; border: none; border-radius: 5px; background-color: #eee; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .btn { height: 50px; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; background-color: #4a4a4a; color: white; } .btn:hover { background-color: #5a5a5a; } .operator { background-color: #ff9500; } .operator:hover { background-color: #ffaa33; } .clear { background-color: #a5a5a5; } .clear:hover { background-color: #b5b5b5; } .equals { background-color: #ff9500; grid-column: span 4; } .equals:hover { background-color: #ffaa33; } const display = document.querySelector('.display'); const buttons = document.querySelectorAll('.btn'); let currentInput = '0'; let previousInput = ''; let operation = null; let resetScreen = false; function updateDisplay() { display.value = currentInput; } function clear() { currentInput = '0'; previousInput = ''; operation = null; } function appendNumber(number) { if (currentInput === '0' || resetScreen) { currentInput = number; resetScreen = false; } else { currentInput += number; } } function chooseOperation(op) { if (operation !== null) calculate(); previousInput = currentInput; operation = op; resetScreen = true; } function calculate() { let result; const prev = parseFloat(previousInput); const current = parseFloat(currentInput); if (isNaN(prev) return; switch (operation) { case '+': result = prev + current; break; case '-': result = prev - current; break; case '*': result = prev * current; break; case '/': result = prev / current; break; default: return; } currentInput = result.toString(); operation = null; } buttons.forEach(button => { button.addEventListener('click', () => { const value = button.dataset.value; if (value >= '0' && value <= '9') { appendNumber(value); } else if (value === '.') { if (!currentInput.includes('.')) { appendNumber(value); } } else if (value === 'C') { clear(); } else if (value === '=') { calculate(); } else { chooseOperation(value); } updateDisplay(); }); }); updateDisplay();