Skip to content

Commit 55fd9ba

Browse files
sahandghavidelsahandghavidel
committed
update basic calculator project
1 parent d464c78 commit 55fd9ba

File tree

3 files changed

+103
-85
lines changed

3 files changed

+103
-85
lines changed

‎projects/basic-calculator/index.html

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Simple Calculator</title>
5-
<link rel="stylesheet" href="style.css" />
6-
</head>
7-
<body>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Basic Calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
811
<div class="calculator">
9-
<input type="text" id="result" readonly /><br /><br />
10-
<div class="buttons">
11-
<button class="clear">C</button>
12-
<button class="operator">/</button>
13-
<button class="operator">*</button>
14-
<button class="operator">-</button>
15-
<button class="number">7</button>
16-
<button class="number">8</button>
17-
<button class="number">9</button>
18-
<button class="operator">+</button>
19-
<button class="number">4</button>
20-
<button class="number">5</button>
21-
<button class="number">6</button>
22-
<button class="equals">=</button>
23-
<button class="number">1</button>
24-
<button class="number">2</button>
25-
<button class="number">3</button>
26-
<button class="number">0</button>
27-
<button class="decimal">.</button>
28-
</div>
12+
<input type="text" id="result" readonly>
13+
<div class="buttons">
14+
<button class="clear">C</button>
15+
<button class="operator">/</button>
16+
<button class="operator">*</button>
17+
<button class="operator">-</button>
18+
<button class="number">7</button>
19+
<button class="number">8</button>
20+
<button class="number">9</button>
21+
<button class="operator">+</button>
22+
<button class="number">4</button>
23+
<button class="number">5</button>
24+
<button class="number">6</button>
25+
<button class="equals">=</button>
26+
<button class="number">1</button>
27+
<button class="number">2</button>
28+
<button class="number">3</button>
29+
<button class="number">0</button>
30+
<button class="decimal">.</button>
31+
</div>
2932
</div>
30-
<script src="script.js"></script>
31-
</body>
32-
</html>
33+
<script src="index.js"></script>
34+
</body>
35+
</html>

‎projects/basic-calculator/index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const buttonsEl = document.querySelectorAll("button");
2+
3+
const inputFieldEl = document.getElementById("result");
4+
5+
for (let i = 0; i < buttonsEl.length; i++) {
6+
buttonsEl[i].addEventListener("click", () => {
7+
const buttonValue = buttonsEl[i].textContent;
8+
if (buttonValue === "C") {
9+
clearResult();
10+
} else if (buttonValue === "=") {
11+
calculateResult();
12+
} else {
13+
appendValue(buttonValue);
14+
}
15+
});
16+
}
17+
18+
function clearResult() {
19+
inputFieldEl.value = "";
20+
}
21+
22+
function calculateResult() {
23+
inputFieldEl.value = eval(inputFieldEl.value);
24+
}
25+
26+
function appendValue(buttonValue) {
27+
inputFieldEl.value += buttonValue;
28+
// inputFieldEl.value = inputFieldEl.value + buttonValue;
29+
}

‎projects/basic-calculator/style.css

Lines changed: 42 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,68 @@
11
* {
22
box-sizing: border-box;
3+
margin: 0;
34
}
45

5-
/* By setting box-sizing: border-box on all elements, we are ensuring that any padding or border we add to an element will be included in its total size. */
6-
76
.calculator {
7+
background-color: #f2f2f2;
8+
padding: 20px;
89
max-width: 400px;
910
margin: 0 auto;
10-
margin-top: 30px;
11-
padding: 20px;
12-
background-color: #f2f2f2;
13-
border: 1px solid #ccc;
14-
border-radius: 5px;
11+
border: solid 1px #ccc;
1512
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
16-
}
17-
18-
#result {
19-
width: 100%;
20-
padding: 10px;
21-
font-size: 24px;
22-
border: none;
2313
border-radius: 5px;
24-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
25-
26-
/* In this case, the box-shadow property is set to 0 2px 5px rgba(0, 0, 0, 0.3) inset. This means that the shadow will have no horizontal offset (0), a vertical offset of 2px, a blur radius of 5px, and a color of rgba(0, 0, 0, 0.3). The inset keyword is used to specify that the shadow should be an inset shadow, rather than an outset shadow. */
14+
margin-top: 40px;
2715
}
2816

29-
.buttons {
30-
display: grid;
31-
grid-template-columns: repeat(4, 1fr);
32-
/* grid-template-columns: repeat(4, 1fr) is a CSS property that sets the size of each column in a grid container. In this case, the repeat(4, 1fr) value creates a grid with four equal-sized columns.
33-
34-
The fr unit stands for "fractional unit" and is used to divide the available space in a grid container. In this case, each column takes up an equal fraction of the available space, regardless of the size of the container.
35-
36-
So, with grid-template-columns: repeat(4, 1fr), the grid container will be divided into four equal-sized columns, which is what we want for our calculator layout. */
37-
grid-gap: 10px;
38-
margin-top: 20px;
17+
#result{
18+
width: 100%;
19+
padding: 10px;
20+
font-size: 24px;
21+
border: none;
22+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
23+
border-radius: 5px;
3924
}
4025

41-
button {
42-
padding: 10px;
43-
font-size: 24px;
44-
border: none;
45-
border-radius: 5px;
46-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
47-
cursor: pointer;
48-
transition: background-color 0.3s ease;
26+
.buttons{
27+
display: grid;
28+
grid-template-columns: repeat(4, 1fr);
29+
grid-gap: 10px;
30+
margin-top: 20px;
4931
}
5032

51-
button:hover {
52-
background-color: #ddd;
53-
}
33+
button{
34+
padding: 10px;
35+
font-size: 24px;
36+
border: none;
37+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
38+
border-radius: 5px;
39+
cursor: pointer;
40+
transition: background-color 0.3s ease;
5441

55-
.clear {
56-
background-color: #ff4136;
57-
color: #fff;
5842
}
5943

60-
.operator {
61-
background-color: #0074d9;
62-
color: #fff;
44+
button:hover{
45+
background-color: #ddd;
6346
}
6447

65-
.number {
66-
background-color: #fff;
67-
color: #333;
48+
.clear{
49+
background-color: #ff4136;
50+
color: #fff;
6851
}
6952

70-
.equals {
71-
grid-row: span 3;
72-
/* grid-row: span 3; is a CSS property that sets the number of rows an element spans in a CSS grid container.
53+
.number, .decimal{
54+
background-color: #fff;
55+
color: #333;
7356

74-
In this case, span 3 is used to make the element span three rows in the grid container. */
75-
background-color: #01ff70;
76-
color: #fff;
7757
}
7858

79-
.decimal {
80-
background-color: #fff;
81-
color: #333;
59+
.operator{
60+
background-color: #0074d9;
61+
color: #fff;
8262
}
63+
64+
.equals{
65+
background-color: #01ff70;
66+
grid-row: span 3;
67+
color: #fff;
68+
}

0 commit comments

Comments
 (0)