├── app.js ├── images └── calculatoricon.png ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | // JavaScript Calculator 2 | 3 | function addValue(numbers) { 4 | var input = document.getElementById('input') 5 | input.value += numbers 6 | } 7 | 8 | function clean() { 9 | var input = document.getElementById('input') 10 | input.value = "" 11 | } 12 | 13 | function result() { 14 | var input = document.getElementById('input') 15 | input.value = eval(input.value) 16 | } 17 | 18 | function cut() { 19 | var input = document.getElementById('input') 20 | input.value = input.value.slice(0,input.value.length -1) 21 | } 22 | // eval value ko calculate karta hai. 23 | 24 | // hamny html main function ke name addValue main jo number die 25 | // hain wo argument hai. 26 | 27 | // or yahan addValue main numbers ka name use kia hai wo parameter hai. 28 | // user koi bhi number click karega to wo number get hojayega. 29 | -------------------------------------------------------------------------------- /images/calculatoricon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuhammadHassanRaza25/JavaScript-Calculator/168ce36c81567ad40bd1324d1a374e7853e69e85/images/calculatoricon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculator 7 | 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 | 52 | 53 | 54 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | box-sizing: border-box; 4 | font-family: sans-serif; 5 | } 6 | body{ 7 | background-image: radial-gradient(circle, darkcyan, darkcyan, black); 8 | display: flex; 9 | justify-content: center; 10 | } 11 | .Calculator{ 12 | margin-top: 4%; 13 | background-color:black; 14 | text-align: center; 15 | padding: 20px; 16 | border: 1px solid ghostwhite; 17 | border-radius: 20px; 18 | box-shadow: 0px 0px 8px ghostwhite; 19 | } 20 | input{ 21 | padding: 10px; 22 | width: 300px; 23 | font-size: 60px; 24 | margin-bottom: 3%; 25 | color: ghostwhite; 26 | text-align: right; 27 | background: transparent; 28 | border: none; 29 | } 30 | .btnrow button{ 31 | width: 60px; 32 | height: 60px; 33 | margin: 10px; 34 | border-radius: 50%; 35 | border: none; 36 | font-size: x-large; 37 | cursor: pointer; 38 | } 39 | .btnrow button:hover{ 40 | border: 2px solid gray; 41 | color: gray; 42 | } 43 | span{ 44 | color:white; 45 | } 46 | 47 | /* phones */ 48 | @media (max-width:430px) { 49 | .Calculator{ 50 | text-align: left; 51 | margin-top: 25%; 52 | width: 80%; 53 | } 54 | .btnrow button{ 55 | width: 45px; 56 | height: 45px; 57 | font-size:20px; 58 | } 59 | } 60 | /* phones */ 61 | @media (max-width:403px) { 62 | .btnrow button{ 63 | width: 40px; 64 | height: 40px; 65 | } 66 | input{ 67 | width: 280px; 68 | } 69 | } 70 | /* phones */ 71 | @media (max-width:383px) { 72 | .Calculator{ 73 | margin-top: 30%; 74 | } 75 | input{ 76 | width: 260px; 77 | } 78 | .btnrow button{ 79 | width: 38px; 80 | height: 38px; 81 | font-size: 15px; 82 | } 83 | } 84 | /* phones */ 85 | @media (max-width:374px) { 86 | .Calculator{ 87 | margin-top: 35%; 88 | } 89 | input{ 90 | width: 230px; 91 | } 92 | .btnrow button{ 93 | width: 30px; 94 | height: 30px; 95 | font-size: 15px; 96 | } 97 | } --------------------------------------------------------------------------------