Calculator 0 C +/- % / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = body { margin: 0; font-family: Arial, sans-serif;}.flex { display: flex;}.items-center { align-items: center;}.justify-center { justify-content: center;}.h-screen { height: 100vh;}.bg-gray-100 { background-color: #f7fafc;}.bg-white { background-color: #fff;}.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.rounded-xl { border-radius: 1rem;}.p-6 { padding: 1.5rem;}.w-64 { width: 16rem;}.text-right { text-align: right;}.text-2xl { font-size: 1.5rem;}.mb-4 { margin-bottom: 1rem;}.px-2 { padding-left: 0.5rem; padding-right: 0.5rem;}.grid { display: grid;}.grid-cols-4 { grid-template-columns: repeat(4, 1fr);}.gap-2 { gap: 0.5rem;}.bg-gray-300 { background-color: #e2e8f0;}.hover\:bg-gray-400:hover { background-color: #cbd5e0;}.text-gray-700 { color: #4a5568;}.font-bold { font-weight: 700;}.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem;}.px-4 { padding-left: 1rem; padding-right: 1rem;}.rounded { border-radius: 0.25rem;}.bg-gray-100 { background-color: #f7fafc;}.hover\:bg-gray-200:hover { background-color: #edf2f7;}.bg-orange-500 { background-color: #ed8936;}.hover\:bg-orange-700:hover { background-color: #c2410c;}.col-span-2 { grid-column: span 2 / span 2;} let displayValue = '0';let operator = '';let firstOperand = '';const display = document.getElementById('display');const handleNumberClick = (number) => { if (displayValue === '0') { displayValue = number; } else { displayValue += number; } updateDisplay();};const handleOperatorClick = (operatorClicked) => { operator = operatorClicked; firstOperand = displayValue; displayValue = '0'; updateDisplay();};const handleEqualsClick = () => { const num1 = parseFloat(firstOperand); const num2 = parseFloat(displayValue); let result = 0; switch (operator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': if (num2 === 0) { displayValue = 'Error'; updateDisplay(); return; } result = num1 / num2; break; default: return; } displayValue = String(result); operator = ''; firstOperand = ''; updateDisplay();};const handleClearClick = () => { displayValue = '0'; operator = ''; firstOperand = ''; updateDisplay();};const handleDecimalClick = () => { if (!displayValue.includes('.')) { displayValue += '.'; } updateDisplay();};const handleSignToggle = () => { displayValue = String(parseFloat(displayValue) * -1); updateDisplay();};const handlePercentClick = () => { displayValue = String(parseFloat(displayValue) / 100); updateDisplay();};const updateDisplay = () => { display.textContent = displayValue;};