Calculator

Okay, let's create a simple web-based calculator. Calculator

body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; font-family: Arial, sans-serif; } .calculator { border: 1px solid #ccc; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #e0e0e0; } #display { width: 100%; height: 60px; border: none; background-color: #222; color: #fff; text-align: right; padding: 10px 20px; font-size: 2em; box-sizing: border-box; /* Include padding in width */ } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); } button { border: 1px solid #ccc; padding: 20px; font-size: 1.2em; background-color: #f9f9f9; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #ddd; } button:active { background-color: #ccc; } .equals { grid-row: span 2; background-color: #f0ad4e; color: white; } .equals:hover { background-color: #ec971f; } .equals:active { background-color: #d58512; } .zero { grid-column: span 2; } let display = document.getElementById('display'); let currentInput = ''; let operator = null; let firstOperand = null; let shouldResetDisplay = false; function appendNumber(number) { if (shouldResetDisplay) { display.value = ''; shouldResetDisplay = false; } // Prevent multiple decimals in one number if (number === '.' && display.value.includes('.')) return; display.value += number; } function appendOperator(op) { if (display.value === '' && op === '-') { // Allow starting with a negative number display.value = '-'; return; } if (display.value === '' || display.value === '-') return; // Handle chaining operations if (firstOperand !== null && !shouldResetDisplay) { calculate(); } firstOperand = parseFloat(display.value); operator = op; shouldResetDisplay = true; // Ready for the next number } function calculate() { if (operator === null || firstOperand === null || shouldResetDisplay) return; const secondOperand = parseFloat(display.value); let result; try { switch (operator) { case '+': result = firstOperand + secondOperand; break; case '-': result = firstOperand - secondOperand; break; case '*': result = firstOperand * secondOperand; break; case '/': if (secondOperand === 0) { result = 'Error'; } else { result = firstOperand / secondOperand; } break; default: return; } // Check if result is too large or small for standard display if (Math.abs(result) > 1e15 || (Math.abs(result) < 1e-15 && result !== 0)) { display.value = result.toExponential(9); // Use exponential notation } else { // Round to avoid floating point inaccuracies for display display.value = parseFloat(result.toFixed(10)).toString(); } } catch (error) { display.value = 'Error'; } // Prepare for next calculation or new input operator = null; firstOperand = null; // Reset first operand after calculation shouldResetDisplay = true; // Reset display on next number input } function clearDisplay() { display.value = ''; currentInput = ''; operator = null; firstOperand = null; shouldResetDisplay = false; } function deleteLast() { if (shouldResetDisplay) { // If display shows result, clear it instead of deleting last char clearDisplay(); } else { display.value = display.value.slice(0, -1); } } // Optional: Add keyboard support document.addEventListener('keydown', (event) => { const key = event.key; if (key >= '0' && key <= '9') { appendNumber(key); } else if (key === '.') { appendNumber('.'); } else if (key === '+' || key === '-' || key === '*' || key === '/') { appendOperator(key); } else if (key === 'Enter' || key === '=') { event.preventDefault(); // Prevent default form submission if inside one calculate(); } else if (key === 'Backspace') { deleteLast(); } else if (key === 'Escape' || key.toLowerCase() === 'c') { clearDisplay(); } }); You can now use the calculator in the preview window. Click the buttons or use your keyboard to perform calculations.