├── README.md
├── .gitattributes
├── js
└── script.js
├── css
└── styles.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Calculator
2 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | // This function clear all the values
2 | function clearScreen() {
3 | document.getElementById("result").value = "";
4 | }
5 |
6 |
7 | // This function display values
8 | function display(value) {
9 | document.getElementById("result").value += value;
10 | }
11 |
12 | // This function evaluates the expression and return result
13 | function calculate() {
14 | var p = document.getElementById("result").value;
15 | var q = eval(p);
16 | document.getElementById("result").value = q;
17 | }
18 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
2 | :root {
3 | --first-hue: 250;
4 | --sat: 66%;
5 | --lig: 75%;
6 | --first-color: hsl(var(--first-hue), var(--sat), var(--lig));
7 | }
8 |
9 | .calculator {
10 | padding: 10px;
11 | border-radius: 1em;
12 | height: 380px;
13 | width: 400px;
14 | margin: auto;
15 | background-color: #191b28;
16 | box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
17 | }
18 |
19 | .display-box {
20 | font-family: 'Orbitron', sans-serif;
21 | background-color: #dcdbe1;
22 | border: solid black 0.5px;
23 | color: black;
24 | border-radius: 5px;
25 | width: 100%;
26 | height: 65%;
27 | }
28 |
29 | .button {
30 | font-family: 'Orbitron', sans-serif;
31 | background-color: var(--first-color);
32 | color: white;
33 | border: solid black 0.5px;
34 | width: 100%;
35 | border-radius: 5px;
36 | height: 70%;
37 | outline: none;
38 | }
39 |
40 | .button:active {
41 | background: #e5e5e5;
42 | -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
43 | -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
44 | box-shadow: inset 0px 0px 5px #c1c1c1;
45 | }
46 |
47 | @media screen and (max-width: 320px) {}
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Calculator
7 |
8 |
9 |
10 |
11 |
12 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------