├── README.md ├── index.js ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Calculator 2 | Calculator - first & best project in Developer's life! 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // CALCULATOR 2 | 3 | const display = document.getElementById("display"); 4 | function appendToDisplay(input){ 5 | display.value += input; 6 | } 7 | function clearDisplay(){ 8 | display.value = ""; 9 | } 10 | function calculate(){ 11 | try{ 12 | display.value = eval(display.value); 13 | } 14 | catch(error) { 15 | display.value = "Error"; 16 | } 17 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | background-color: hsl(0, 0%, 95%); 8 | } 9 | #calculator{ 10 | font-family: Arial, sans-serif; 11 | background-color: hsl(0, 0%, 15%); 12 | border-radius: : 15px; 13 | max-width:500px; 14 | overflow: hidden; 15 | } 16 | #display{ 17 | width: 100%; 18 | padding: 20px; 19 | font-size: 5rem; 20 | text-align: left; 21 | border: none; 22 | background-color: hsl(0, 0%, 20%); 23 | } 24 | #keys{ 25 | display: : grid; 26 | grid-template-columns: repeat(4,1fr); 27 | gap: 10px; 28 | padding: 25px; 29 | } 30 | button{ 31 | width: 100px; 32 | height: 100px; 33 | border-radius: : 50px; 34 | border: none; 35 | background-color: hsl(0, 0%, 10%); 36 | color: white; 37 | font-size: 3rem; 38 | font-weight: bold; 39 | cursor: pointer; 40 | } 41 | button:hover{ 42 | background-color: hsl(0, 0%, 40%); 43 | } 44 | button:active{ 45 | background-color: hsl(35, 100%, 50%); 46 | } 47 | .operator-btn{ 48 | background-color: hsl(35, 100%, 65%); 49 | } 50 | .operator-btn:hover{ 51 | background-color: hsl(35, 100%, 65%); 52 | } 53 | .operator-btn:active{ 54 | background-color: hsl(35, 100%, 75%); 55 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | input id="display" readonly> 12 |
13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 23 | 24 | 25 | 27 | 28 | 29 |