├── style.css
├── script.js
└── index.html
/style.css:
--------------------------------------------------------------------------------
1 | #calculator {
2 | width: 300px;
3 | margin: 0 auto;
4 | text-align: center;
5 | }
6 |
7 | #display {
8 | width: 100%;
9 | margin-bottom: 20px;
10 | font-size: 20px;
11 | background-color: #eee;
12 | }
13 |
14 | table {
15 | margin: 0 auto;
16 | }
17 |
18 | td {
19 | padding: 10px;
20 | }
21 |
22 | button {
23 | width: 100%;
24 | height: 50px;
25 | font-size: 20px;
26 | background-color: #fff;
27 | border: 1px solid #ccc;
28 | }
29 |
30 | #clear {
31 | background-color: #f44336;
32 | color: #fff;
33 | }
34 |
35 | #equals {
36 | background-color: #4CAF50;
37 | color: #fff;
38 | }
39 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | var display = document.getElementById("display");
2 | var numbers = document.getElementsByClassName("number");
3 | var operators = document.getElementsByClassName("operator");
4 | var clearBtn = document.getElementById("clear");
5 | var equalsBtn = document.getElementById("equals");
6 |
7 | // Add event listeners to the number buttons
8 | for (var i = 0; i < numbers.length; i++) {
9 | numbers[i].addEventListener("click", function(event) {
10 | var value = event.target.value;
11 | display.value += value;
12 | });
13 | }
14 |
15 | // Add event listeners to the operator buttons
16 | for (var i = 0; i < operators.length; i++) {
17 | operators[i].addEventListener("click", function(event) {
18 | var value = event.target.value;
19 | display.value += value;
20 | });
21 | }
22 |
23 | // Add event listener to the clear button
24 | clearBtn.addEventListener("click", function() {
25 | display.value = "";
26 | });
27 |
28 | // Add event listener to the equals button
29 | equalsBtn.addEventListener("click", function() {
30 | var result = eval(display.value);
31 | display.value = result;
32 | });
33 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Calculator
6 |
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 |