Untitled
unknown
plain_text
a year ago
3.1 kB
1
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Calculator</title> <style> .calculator { width: 200px; margin: 0 auto; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .result { text-align: right; margin-bottom: 10px; height: 30px; line-height: 30px; padding: 0 10px; background-color: #f8f8f8; border: 1px solid #ccc; border-radius: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .buttons button { height: 40px; line-height: 40px; text-align: center; font-size: 18px; background-color: #eee; border: none; border-radius: 5px; } .buttons button:hover { background-color: #ddd; cursor: pointer; } </style> </head> <body> <div class="calculator"> <div class="result" id="result">0</div> <div class="buttons"> <button onclick="clearResult()">C</button> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="appendOperator('+')">+</button> <button onclick="appendNumber('4')">4</button> <button onclick="appendNumber('5')">5</button> <button onclick="appendNumber('6')">6</button> <button onclick="appendOperator('-')">-</button> <button onclick="appendNumber('1')">1</button> <button onclick="appendNumber('2')">2</button> <button onclick="appendNumber('3')">3</button> <button onclick="appendOperator('*')">*</button> <button onclick="appendNumber('0')">0</button> <button onclick="appendOperator('.')">.</button> <button onclick="calculateResult()">=</button> <button onclick="appendOperator('/')">/</button> </div> </div> <script> let result = document.getElementById('result'); let expression = ''; function appendNumber(number) { expression += number; result.textContent = expression; } function appendOperator(operator) { expression += operator; result.textContent = expression; } function calculateResult() { try { let resultValue = eval(expression); result.textContent = resultValue; expression = ''; } catch (error) { result.textContent = 'Error'; } } function clearResult() { expression = ''; result.textContent = '0'; } </script> </body> </html>