├── style.css ├── index.html └── script.js /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #f4f4f4; 7 | margin: 0; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | .calculator { 12 | border: 1px solid #ccc; 13 | border-radius: 10px; 14 | padding: 10px; 15 | background-color: white; 16 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 17 | } 18 | 19 | .display { 20 | background-color: #222; 21 | color: white; 22 | padding: 20px; 23 | font-size: 2em; 24 | text-align: right; 25 | border-radius: 5px; 26 | margin-bottom: 10px; 27 | } 28 | 29 | .buttons { 30 | display: grid; 31 | grid-template-columns: repeat(4, 1fr); 32 | gap: 10px; 33 | } 34 | 35 | .btn { 36 | background-color: #eee; 37 | border: none; 38 | padding: 20px; 39 | font-size: 1.5em; 40 | border-radius: 5px; 41 | cursor: pointer; 42 | transition: background-color 0.3s; 43 | } 44 | 45 | .btn:hover { 46 | background-color: #ddd; 47 | } 48 | 49 | .btn:active { 50 | background-color: #ccc; 51 | } 52 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | calculator 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const display = document.getElementById('display'); 3 | const buttons = document.querySelectorAll('.btn'); 4 | 5 | let currentInput = ''; 6 | let previousInput = ''; 7 | let operator = null; 8 | 9 | buttons.forEach(button => { 10 | button.addEventListener('click', () => { 11 | const value = button.getAttribute('data-value'); 12 | 13 | if (value === 'C') { 14 | currentInput = ''; 15 | previousInput = ''; 16 | operator = null; 17 | display.textContent = ''; 18 | return; 19 | } 20 | 21 | if (value === '=') { 22 | if (currentInput && previousInput && operator) { 23 | currentInput = eval(`${previousInput} ${operator} ${currentInput}`); 24 | display.textContent = currentInput; 25 | previousInput = ''; 26 | operator = null; 27 | } 28 | return; 29 | } 30 | 31 | if (['+', '-', '*', '/'].includes(value)) { 32 | if (currentInput) { 33 | if (previousInput) { 34 | previousInput = eval(`${previousInput} ${operator} ${currentInput}`); 35 | } else { 36 | previousInput = currentInput; 37 | } 38 | currentInput = ''; 39 | operator = value; 40 | } 41 | return; 42 | } 43 | 44 | currentInput += value; 45 | display.textContent = currentInput; 46 | }); 47 | }); 48 | }); 49 | --------------------------------------------------------------------------------