├── README.md ├── calc.html ├── cal.js └── cal.css /README.md: -------------------------------------------------------------------------------- 1 | # mini-Calculator -------------------------------------------------------------------------------- /calc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Calculator

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 | 36 | -------------------------------------------------------------------------------- /cal.js: -------------------------------------------------------------------------------- 1 | const result = document.getElementById('result'); 2 | const keys = document.querySelector('.keys'); 3 | 4 | // Add a click event listener to the keys 5 | keys.addEventListener('click', (event) => { 6 | if (event.target.matches('button')) { 7 | const key = event.target; 8 | const keyValue = key.textContent; 9 | const displayValue = result.value; 10 | 11 | if (key.classList.contains('operator')) { 12 | if (keyValue === 'C') { 13 | // Clear the input field 14 | result.value = ''; 15 | } else if (keyValue === '=') { 16 | // Evaluate and display the result 17 | try { 18 | result.value = eval(displayValue); 19 | } catch (error) { 20 | result.value = 'Error'; 21 | } 22 | } else { 23 | // Append the operator to the input field 24 | result.value += keyValue; 25 | } 26 | } else { 27 | // Append the number or decimal point to the input field 28 | result.value += keyValue; 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /cal.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | background-color: #f5f5f5; 8 | } 9 | header{ 10 | border: #333; 11 | text-decoration-color: aliceblue; 12 | padding: 10px; 13 | margin: 0; 14 | position: absolute; 15 | top:4vw; 16 | } 17 | .calculator { 18 | width: 250px; 19 | border: 1px solid #ccc; 20 | border-radius: 5px; 21 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 22 | background-color: #fff; 23 | } 24 | 25 | .output { 26 | text-align: right; 27 | padding: 10px; 28 | border-bottom: 1px solid #ccc; 29 | } 30 | 31 | .output input { 32 | width: 100%; 33 | padding: 5px; 34 | font-size: 2em; 35 | background-color: chartreuse; 36 | border: none; 37 | outline: sienna; 38 | } 39 | 40 | .keys { 41 | display: grid; 42 | grid-template-columns: repeat(4, 1fr); 43 | gap: 5px; 44 | padding: 10px; 45 | } 46 | 47 | button { 48 | padding: 10px; 49 | font-size: 1.2em; 50 | background-color: #20c1e9; 51 | color: #fff; 52 | border: none; 53 | border-radius: 5px; 54 | cursor: pointer; 55 | transition: background-color 0.2s; 56 | } 57 | 58 | button:hover { 59 | background-color: #eb0b0b; 60 | } 61 | 62 | .operator { 63 | background-color: #ff9800; 64 | color: #080808; 65 | } 66 | --------------------------------------------------------------------------------