├── calculator html.file.html ├── calculator script.js └── calculator.css.css /calculator html.file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rathi's calculator 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 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 |
45 |
46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /calculator script.js: -------------------------------------------------------------------------------- 1 | let input = document.getElementById('inputBox'); 2 | let buttons = document.querySelectorAll('button'); 3 | 4 | let string = ""; 5 | let arr = Array.from(buttons); 6 | arr.forEach(button => { 7 | button.addEventListener('click', (e) =>{ 8 | if(e.target.innerHTML == '='){ 9 | string = eval(string); 10 | input.value = string; 11 | } 12 | 13 | else if(e.target.innerHTML == 'AC'){ 14 | string = ""; 15 | input.value = string; 16 | } 17 | else if(e.target.innerHTML == 'DEL'){ 18 | string = string.substring(0, string.length-1); 19 | input.value = string; 20 | } 21 | else{ 22 | string += e.target.innerHTML; 23 | input.value = string; 24 | } 25 | 26 | }) 27 | }) -------------------------------------------------------------------------------- /calculator.css.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body{ 11 | width: 100%; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: linear-gradient(45deg, #0a0a0a, #101111); 17 | } 18 | 19 | .calculator{ 20 | border: 1px solid #49779a; 21 | padding: 20px; 22 | border-radius: 16px; 23 | background: transparent; 24 | box-shadow: 0px 3px 15px rgba(119, 119, 113, 0.5); 25 | 26 | } 27 | 28 | input{ 29 | width: 320px; 30 | border: transparent; 31 | padding: 24px; 32 | margin: 10px; 33 | background: black; 34 | box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1); 35 | font-size: 40px; 36 | text-align: right; 37 | cursor: pointer; 38 | color: #ffffff; 39 | } 40 | 41 | input::placeholder{ 42 | color: #ffffff; 43 | } 44 | 45 | button{ 46 | border:transparent; 47 | width: 60px; 48 | height: 60px; 49 | margin: 10px; 50 | border-radius: 50%; 51 | background: #8076b8; 52 | color: #161414; 53 | font-size: 20px; 54 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); 55 | cursor: pointer; 56 | } 57 | 58 | .equalBtn{ 59 | background-color: #0cabd7; 60 | } 61 | 62 | .operator{ 63 | color: #161112; 64 | } 65 | --------------------------------------------------------------------------------