Skip to content

Commit 17701ae

Browse files
developermithudevelopermithu
committed
initial commit
0 parents  commit 17701ae

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎app.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const display = document.querySelector("#display");
2+
const buttons = document.querySelectorAll("button");
3+
4+
buttons.forEach((btn) => {
5+
btn.addEventListener("click", () => {
6+
if (btn.id === "=") {
7+
display.value = eval(display.value);
8+
} else if (btn.id === "ac") {
9+
display.value = "";
10+
} else if (btn.id == "de") {
11+
display.value = display.value.slice(0, -1);
12+
} else {
13+
display.value += btn.id;
14+
}
15+
});
16+
});

‎index.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
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>Javascript Calculator - developermithu</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script src="app.js" defer></script>
10+
</head>
11+
<body>
12+
<div id="calculator">
13+
<input type="text" id="display" disabled />
14+
<br />
15+
<button id="ac" class="operator">AC</button>
16+
<button id="de" class="operator">DE</button>
17+
<button id="." class="operator">.</button>
18+
<button id="/" class="operator">/</button>
19+
<br />
20+
<button id="7">7</button>
21+
<button id="8">8</button>
22+
<button id="9">9</button>
23+
<button id="*" class="operator">*</button>
24+
<br />
25+
<button id="4">4</button>
26+
<button id="5">5</button>
27+
<button id="6">6</button>
28+
<button id="-" class="operator">-</button>
29+
<br />
30+
<button id="1">1</button>
31+
<button id="2">2</button>
32+
<button id="3">3</button>
33+
<button id="+" class="operator">+</button>
34+
<br />
35+
36+
<button id="00">00</button>
37+
<button id="0">0</button>
38+
<button id="=" class="equal operator">=</button>
39+
<br />
40+
</div>
41+
42+
<footer>
43+
Developed by 👉 <a href="https://developermithu.vercel.app" target="_blank">Developer Mithu</a>
44+
</footer>
45+
</body>
46+
</html>

‎style.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body {
2+
text-align: center;
3+
margin: 0;
4+
background: #bf4d5d;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
}
10+
11+
#calculator {
12+
max-width: 360px;
13+
background-color: #0d1b2a;
14+
border-radius: 10px;
15+
padding: 20px;
16+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
17+
}
18+
19+
#display {
20+
width: 100%;
21+
height: 56px;
22+
font-size: 20px;
23+
text-align: right;
24+
margin-bottom: 10px;
25+
padding: 20px;
26+
border-radius: 5px;
27+
color: #e0e1dd;
28+
background-color: rgba(13, 27, 42, 0.3);
29+
border: none;
30+
box-sizing: border-box;
31+
}
32+
33+
.operator {
34+
color: #219ebc;
35+
}
36+
37+
#ac {
38+
color: #bf4d5d;
39+
}
40+
41+
.equal {
42+
width: calc(50% - 10px);
43+
}
44+
45+
button {
46+
width: calc(25% - 10px);
47+
height: 50px;
48+
font-size: 20px;
49+
margin: 10px 5px;
50+
border: none;
51+
border-radius: 5px;
52+
float: left;
53+
background-color: rgb(13, 27, 42);
54+
color: #e0e1dd;
55+
-webkit-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
56+
-moz-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
57+
box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2);
58+
}
59+
60+
button:hover {
61+
cursor: pointer;
62+
}
63+
64+
button:active {
65+
transform: scale(1.05);
66+
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.19),
67+
0 1.5px 1.5px rgba(0, 0, 0, 0.23);
68+
}
69+
70+
footer {
71+
position: absolute;
72+
bottom: 60px;
73+
font-size: 18px;
74+
color: #0d1b2a;
75+
}
76+
77+
footer a {
78+
color: #0d1b2a;
79+
text-decoration: none;
80+
font-weight: 600;
81+
}
82+
83+
footer a:hover {
84+
text-decoration: underline;
85+
}

0 commit comments

Comments
 (0)