Skip to content

Commit 58a3380

Browse files
LCSOGthbLCSOGthb
authored
Added Calculator
1 parent 144cc60 commit 58a3380

3 files changed

Lines changed: 132 additions & 0 deletions

File tree

‎tools/calculator.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.calc-container {
2+
max-width: 300px;
3+
margin: 2rem auto;
4+
background: white;
5+
border-radius: 12px;
6+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
7+
overflow: hidden;
8+
}
9+
10+
.calc-screen {
11+
background: #222;
12+
color: #0f0;
13+
font-size: 2rem;
14+
padding: 1rem;
15+
text-align: right;
16+
}
17+
18+
.calc-buttons {
19+
display: grid;
20+
grid-template-columns: repeat(4, 1fr);
21+
}
22+
23+
.calc-buttons button {
24+
padding: 1.2rem;
25+
font-size: 1.1rem;
26+
border: 1px solid #ddd;
27+
background: #f9f9f9;
28+
cursor: pointer;
29+
transition: background 0.2s;
30+
}
31+
32+
.calc-buttons button:hover {
33+
background: #eee;
34+
}
35+
36+
.calc-buttons button:nth-child(4n) {
37+
background: #4f46e5;
38+
color: white;
39+
}
40+
41+
.calc-buttons button:nth-child(4n):hover {
42+
background: #4338ca;
43+
}
44+
45+
.calc-buttons button:last-child {
46+
grid-column: span 2;
47+
background: #10b981;
48+
color: white;
49+
}
50+
51+
.calc-buttons button:last-child:hover {
52+
background: #059669;
53+
}

‎tools/calculator.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Calculator</title>
7+
<link rel="stylesheet" href="../css/style.css">
8+
<link rel="stylesheet" href="calculator.css">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Calculator</h1>
13+
<a href="../index.html" class="btn">← Back</a>
14+
</header>
15+
16+
<main class="calc-container">
17+
<div class="calc-screen" id="screen">0</div>
18+
<div class="calc-buttons">
19+
<button>C</button>
20+
<button>←</button>
21+
<button>%</button>
22+
<button>/</button>
23+
24+
<button>7</button>
25+
<button>8</button>
26+
<button>9</button>
27+
<button>*</button>
28+
29+
<button>4</button>
30+
<button>5</button>
31+
<button>6</button>
32+
<button>-</button>
33+
34+
<button>1</button>
35+
<button>2</button>
36+
<button>3</button>
37+
<button>+</button>
38+
39+
<button>0</button>
40+
<button>.</button>
41+
<button>=</button>
42+
</div>
43+
</main>
44+
45+
<script src="calculator.js"></script>
46+
</body>
47+
</html>

‎tools/calculator.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const screen = document.getElementById("screen");
2+
const buttons = document.querySelectorAll(".calc-buttons button");
3+
4+
let current = "";
5+
6+
buttons.forEach(btn => {
7+
btn.addEventListener("click", () => {
8+
const value = btn.textContent;
9+
10+
if (value === "C") {
11+
current = "";
12+
screen.textContent = "0";
13+
}
14+
else if (value === "←") {
15+
current = current.slice(0, -1);
16+
screen.textContent = current || "0";
17+
}
18+
else if (value === "=") {
19+
try {
20+
current = eval(current).toString();
21+
screen.textContent = current;
22+
} catch {
23+
screen.textContent = "Error";
24+
current = "";
25+
}
26+
}
27+
else {
28+
current += value;
29+
screen.textContent = current;
30+
}
31+
});
32+
});

0 commit comments

Comments
 (0)