Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .calculator { border: 2px solid #ccc; padding: 20px; border-radius: 10px; background-color: white; } .calculator input, .calculator button { padding: 10px; margin: 5px; font-size: 18px; border-radius: 5px; border: 1px solid #ccc; } .calculator button { background-color: #f0f0f0; cursor: pointer; } .calculator button:hover { background-color: #ddd; } .output { width: 200px; text-align: right; font-size: 24px; height: 40px; margin-bottom: 10px; } </style> </head> <body> <div class="calculator"> <div class="output" id="output">0</div> <div> <button onclick="appendNumber(7)">7</button> <button onclick="appendNumber(8)">8</button> <button onclick="appendNumber(9)">9</button> <button onclick="setOperation('+')">+</button> </div> <div> <button onclick="appendNumber(4)">4</button> <button onclick="appendNumber(5)">5</button> <button onclick="appendNumber(6)">6</button> <button onclick="setOperation('-')">-</button> </div> <div> <button onclick="appendNumber(1)">1</button> <button onclick="appendNumber(2)">2</button> <button onclick="appendNumber(3)">3</button> <button onclick="setOperation('*')">*</button> </div> <div> <button onclick="appendNumber(0)">0</button> <button onclick="clearOutput()">C</button> <button onclick="calculate()">=</button> <button onclick="setOperation('/')">/</button> </div> </div> <script> let currentInput = ''; let previousInput = ''; let operation = null; function appendNumber(number) { currentInput += number; updateOutput(); } function clearOutput() { currentInput = ''; previousInput = ''; operation = null; updateOutput(); } function setOperation(op) { if (currentInput === '') return; if (previousInput !== '') { calculate(); } operation = op; previousInput = currentInput; currentInput = ''; } function calculate() { let result; const prev = parseFloat(previousInput); const current = parseFloat(currentInput); if (isNaN(prev) || isNaN(current)) return; switch (operation) { case '+': result = prev + current; break; case '-': result = prev - current; break; case '*': result = prev * current; break; case '/': if (current === 0) { result = 'Error'; } else { result = prev / current; } break; default: return; } currentInput = result.toString(); operation = null; previousInput = ''; updateOutput(); } function updateOutput() { document.getElementById('output').textContent = currentInput || '0'; } </script> </body> </html>
Leave a Comment