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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy