├── calculator.png ├── script.js ├── style.css └── index.html /calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miguelznunez/Calculator/HEAD/calculator.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const userInput = document.querySelector("#user_input"); 2 | var expression = ""; 3 | 4 | press = (num) => { 5 | expression += num; 6 | userInput.value = expression; 7 | } 8 | 9 | equal = () => { 10 | userInput.value = eval(expression); 11 | expression = ""; 12 | } 13 | 14 | erase = () => { 15 | expression = ""; 16 | userInput.value = expression; 17 | } 18 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | overflow: hidden; 3 | background: linear-gradient(#f4f4ed, white); 4 | } 5 | 6 | .container{ 7 | width: 95%; 8 | height: 100vh; 9 | margin: auto; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .calculator{ 16 | width: 370px; 17 | margin: auto; 18 | border-radius: 2px; 19 | background: #f2f2f2; 20 | padding: 15px 15px 20px 20px; 21 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); 22 | } 23 | 24 | #user_input{ 25 | box-sizing: border-box; 26 | width: 100%; 27 | padding: 40px 5px; 28 | background: whitesmoke; 29 | text-align: right; 30 | direction: ltr; 31 | outline: none; 32 | border: none; 33 | font-size: 2rem; 34 | } 35 | 36 | .btn{ 37 | width: 24%; 38 | height: 45px; 39 | border-radius: 1px; 40 | border: none; 41 | outline: none; 42 | margin-top: 3px; 43 | background: whitesmoke; 44 | } 45 | 46 | .btnEqual{ 47 | width: 99.2%; 48 | height: 45px; 49 | border-radius: 1px; 50 | border: none; 51 | outline: none; 52 | margin-top: 3px; 53 | background: whitesmoke; 54 | } 55 | 56 | .btn:hover, .btnEqual:hover{background-color: rgba(128, 128, 128, 0.1);} 57 | 58 | @media(max-width:480px){ 59 | .btn{width: 23.4%;} 60 | } 61 | 62 | @media(max-width:320px){ 63 | .btn{width: 23%;} 64 | } 65 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 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 | --------------------------------------------------------------------------------