├── README.md
├── script.js
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Calculator-with-JavaScript
2 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | function Num(val){
2 | document.getElementById('result').value += val;
3 | }
4 | function equal(){
5 | let Input = document.getElementById('result').value;
6 | let Output = eval(Input);
7 | document.getElementById('result').value = Output;
8 | }
9 |
10 | function clr(){
11 | document.getElementById('result').value = '';
12 | }
13 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
3 | }
4 | table.tbl{
5 | position: absolute;
6 | top: 45%;
7 | left: 50%;
8 | transform: translate(-50%, -50%);
9 | padding: 15px;
10 | box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
11 | }
12 | input[type="button"]{
13 | color: black;
14 | cursor: pointer;
15 | background-color: white;
16 | font-size: 2em;
17 | border: 1px solid #ddd;
18 | padding: 20px;
19 | width: 100%;
20 | margin: 10px 60px 10px 0px;
21 | }
22 | input[type="text"]{
23 | color: black;
24 | background: white;
25 | border: 1px solid #ddd;
26 | padding: 20px;
27 | font-size: 2em;
28 | width: 100%;
29 | }
30 | #clear{
31 | background: #ff9fa8;
32 | border: 1px solid #ff9fa8;
33 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | JavaScript Calculator
8 |
9 |
10 |
11 |
12 |
42 |
43 |
--------------------------------------------------------------------------------