├── script.js ├── style.css └── index.html /script.js: -------------------------------------------------------------------------------- 1 | function getValue(val) { 2 | document.getElementById('input').value += val; 3 | } 4 | function equal() { 5 | const a = document.getElementById('input'); 6 | a.value = eval(a.value); 7 | } 8 | function clearAll() { 9 | document.getElementById('input').value = ''; 10 | } 11 | function clearOne(inputID) { 12 | const inputField = document.getElementById(inputID); 13 | const currentValue = inputField.value; 14 | const newValue = currentValue.slice(0, -1); 15 | inputField.value = newValue; 16 | } 17 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .main{ 7 | width: 100vw; 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: black; 14 | } 15 | input{ 16 | margin-bottom: 5px; 17 | padding: 5px; 18 | font-size: 23px; 19 | width: 230px; 20 | height: 40px; 21 | border-radius: 20px; 22 | background-color: black; 23 | text-align: right; 24 | border: 2px solid rgb(29, 29, 29); 25 | color: white; 26 | } 27 | button{ 28 | width: 55px; 29 | height: 55px; 30 | border-radius: 50%; 31 | border: 2px solid rgb(25, 25, 25); 32 | margin-bottom: 5px; 33 | background: transparent; 34 | font-size: 20px; 35 | color: aqua; 36 | } 37 | -------------------------------------------------------------------------------- /index.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 | 37 | 38 |
39 |
40 |
41 | 42 | 43 | 44 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | --------------------------------------------------------------------------------