└── calculator └── Calculator └── public ├── app.js ├── style.css └── index.html /calculator/Calculator/public/app.js: -------------------------------------------------------------------------------- 1 | var display = document.getElementById("display"); 2 | function getValue(btnValue){ 3 | display.value+=btnValue 4 | } 5 | function calc(){ 6 | var a = display.value; 7 | var ans = eval(a); 8 | display.value = ans; 9 | } 10 | function clearAns(){ 11 | display.value = ""; 12 | } 13 | function clearAns2(){ 14 | display.value = display.value.substr(0,display.value.length-1); 15 | } -------------------------------------------------------------------------------- /calculator/Calculator/public/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, Helvetica, sans-serif; 5 | 6 | } 7 | .all{ 8 | background: rgb(183, 190, 184); 9 | background: radial-gradient(circle, #e68632 0%, rgba(0,0,0,1) 100%); 10 | 11 | } 12 | h1{ 13 | color: black; 14 | font-weight: 800; 15 | font-size: 60px; 16 | font-family: cursive; 17 | text-align: center; 18 | 19 | } 20 | span{ 21 | color: #c09f81; 22 | font-weight: bold; 23 | } 24 | .main{ 25 | display: flex; 26 | justify-content: center; 27 | 28 | } 29 | .card{ 30 | width: 20rem; 31 | background-color: rgb(160, 157, 157); 32 | border-radius: 12px; 33 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 34 | } 35 | #display{ 36 | width: 18rem; 37 | height: 3rem; 38 | box-shadow: 1px 1px rgba(0, 0, 0, 0.9) inset; 39 | background-color: rgb(214, 209, 209); 40 | color: black; 41 | font-size: xx-large; 42 | padding: 0 10px; 43 | text-align: right; 44 | } 45 | 46 | .buttons{ 47 | display: grid; 48 | grid-template-columns: auto auto auto auto; 49 | } 50 | .buttons button{ 51 | width: 72px; 52 | height: 60px; 53 | border: 1px solid rgb(160, 157, 157); 54 | font-size: 1.5rem; 55 | text-align: center; 56 | transition: .2s linear all; 57 | } 58 | .buttons button:hover{ 59 | background-color: #f57f17; 60 | 61 | } 62 | .buttons button:active{ 63 | background-color: #bdbdbd; 64 | } 65 | .equal{ 66 | background-color: #f1913d; 67 | } 68 | @media (max-width: 320px){ 69 | #display{ 70 | width: 16.3rem; 71 | height: 3rem; 72 | box-shadow: 1px 1px inset; 73 | background-color: rgb(214, 209, 209); 74 | } 75 | .buttons button{ 76 | width: 65px; 77 | height: 55px; 78 | border: 1px solid rgb(160, 157, 157); 79 | font-size: 1.5rem; 80 | text-align: center; 81 | transition: .2s linear all; 82 | } 83 | h1{ 84 | color: black; 85 | font-weight: 600; 86 | font-size: 40px; 87 | font-family: cursive; 88 | text-align: center; 89 | padding-top: 6px; 90 | } 91 | 92 | span{ 93 | color: #f57f17; 94 | font-weight: bold; 95 | } 96 | } 97 | 98 | 99 | -------------------------------------------------------------------------------- /calculator/Calculator/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Calculator 10 | 11 | 12 |
13 |

Calculator

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 | 52 | 53 | 54 | --------------------------------------------------------------------------------