Skip to content

Commit 6972313

Browse files
sanjana04Wsanjana04W
authored
Add files via upload
1 parent 8d81b47 commit 6972313

3 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎app.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const display = document.getElementById("display");
3+
const buttons = document.querySelectorAll(".btn");
4+
5+
let currentInput = "";
6+
let operator = "";
7+
let firstValue = "";
8+
9+
function updateDisplay(value) {
10+
display.value = value;
11+
}
12+
13+
buttons.forEach(btn => {
14+
btn.addEventListener("click", () => {
15+
const value = btn.innerText;
16+
const action = btn.dataset.action;
17+
18+
if (btn.classList.contains("number")) {
19+
currentInput += value;
20+
updateDisplay(currentInput);
21+
}
22+
else if (btn.classList.contains("operator")) {
23+
if (currentInput === "" && firstValue === "") return;
24+
if (firstValue === "") {
25+
firstValue = currentInput;
26+
operator = action;
27+
currentInput = "";
28+
} else {
29+
firstValue = eval(`${firstValue} ${operator} ${currentInput}`);
30+
operator = action;
31+
currentInput = "";
32+
updateDisplay(firstValue);
33+
}
34+
}
35+
else if (action === "=") {
36+
if (firstValue !== "" && currentInput !== "") {
37+
firstValue = eval(`${firstValue} ${operator} ${currentInput}`);
38+
updateDisplay(firstValue);
39+
currentInput = "";
40+
operator = "";
41+
}
42+
}
43+
else if (action === "clear") {
44+
currentInput = "";
45+
firstValue = "";
46+
operator = "";
47+
updateDisplay("");
48+
}
49+
else if (action === "back") {
50+
currentInput = currentInput.slice(0, -1);
51+
updateDisplay(currentInput);
52+
}
53+
else if (action === "+/-") {
54+
if (currentInput !== "") {
55+
currentInput = (parseFloat(currentInput) * -1).toString();
56+
updateDisplay(currentInput);
57+
}
58+
}
59+
});
60+
});
61+
});

‎index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>Sleek Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="calculator">
11+
<input type="text" id="display" class="display" readonly>
12+
<div class="buttons">
13+
<button class="btn function" data-action="clear">C</button>
14+
<button class="btn function" data-action="back">⌫</button>
15+
<button class="btn operator" data-action="%">%</button>
16+
<button class="btn operator" data-action="/">÷</button>
17+
18+
<button class="btn number">7</button>
19+
<button class="btn number">8</button>
20+
<button class="btn number">9</button>
21+
<button class="btn operator" data-action="*">×</button>
22+
23+
<button class="btn number">4</button>
24+
<button class="btn number">5</button>
25+
<button class="btn number">6</button>
26+
<button class="btn operator" data-action="-">−</button>
27+
28+
<button class="btn number">1</button>
29+
<button class="btn number">2</button>
30+
<button class="btn number">3</button>
31+
<button class="btn operator" data-action="+">+</button>
32+
33+
<button class="btn function" data-action="+/-">±</button>
34+
<button class="btn number">0</button>
35+
<button class="btn number">.</button>
36+
<button class="btn equals" data-action="=">=</button>
37+
</div>
38+
</div>
39+
<script src="app.js"></script>
40+
</body>
41+
</html>

‎style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
background: linear-gradient(135deg, #1c5066, #203a43, #69b3d5);
7+
font-family: Arial, sans-serif;
8+
}
9+
10+
.calculator {
11+
background: #1e272e;
12+
border-radius: 20px;
13+
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
14+
padding: 20px;
15+
width: 320px;
16+
}
17+
18+
.display {
19+
width: 100%;
20+
height: 60px;
21+
font-size: 24px;
22+
text-align: right;
23+
padding: 10px;
24+
margin-bottom: 15px;
25+
border: none;
26+
border-radius: 10px;
27+
background: #dfe6e9;
28+
}
29+
30+
.buttons {
31+
display: grid;
32+
grid-template-columns: repeat(4, 1fr);
33+
gap: 12px;
34+
}
35+
36+
.btn {
37+
height: 60px;
38+
border: none;
39+
border-radius: 12px;
40+
font-size: 20px;
41+
cursor: pointer;
42+
transition: background 0.2s;
43+
}
44+
45+
.btn.number {
46+
background: #0984e3;
47+
color: white;
48+
}
49+
50+
.btn.operator {
51+
background: #6c5ce7;
52+
color: white;
53+
}
54+
55+
.btn.function {
56+
background: #00b894;
57+
color: white;
58+
}
59+
60+
.btn.equals {
61+
background: #d63031;
62+
color: white;
63+
grid-column: span 1;
64+
}
65+
66+
.btn:hover {
67+
opacity: 0.8;
68+
}

0 commit comments

Comments
 (0)