Skip to content

Commit 91abdc1

Browse files
swapnilsparshswapnilsparsh
committed
Day 26 - Calculator
1 parent 62bc9c3 commit 91abdc1

File tree

5 files changed

+172
-0
lines changed

5 files changed

+172
-0
lines changed

‎26 - Calculator/assets/calculator.png

1.71 KB
Loading

‎26 - Calculator/font/sans.ttf

54.5 KB
Binary file not shown.

‎26 - Calculator/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<link rel="shortcut icon" href="assets/calculator.png" type="image/x-icon" />
8+
<link rel="stylesheet" href="style.css" />
9+
<title>Calculator</title>
10+
</head>
11+
<body>
12+
<h2>Calculator</h2>
13+
<div class="container">
14+
<div id="display"></div>
15+
<div class="buttons">
16+
<div class="button">C</div>
17+
<div class="button">CE</div>
18+
<div class="button">%</div>
19+
<div class="button">/</div>
20+
<div class="button">7</div>
21+
<div class="button">8</div>
22+
<div class="button">9</div>
23+
<div class="button">*</div>
24+
<div class="button">4</div>
25+
<div class="button">5</div>
26+
<div class="button">6</div>
27+
<div class="button">-</div>
28+
<div class="button">1</div>
29+
<div class="button">2</div>
30+
<div class="button">3</div>
31+
<div class="button">+</div>
32+
<div class="button left">0</div>
33+
<div class="button ">00</div>
34+
<div class="button ">.</div>
35+
<div id="equal" class="button right">=</div>
36+
</div>
37+
</div>
38+
<footer>
39+
<p>&#x3c; &#47; &#x3e; with ❤️ by
40+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
41+
<br>
42+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
43+
</a>
44+
</p>
45+
</footer>
46+
<script src="script.js"></script>
47+
</body>
48+
</html>

‎26 - Calculator/script.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
let display = document.getElementById('display');
2+
3+
let buttons = Array.from(document.getElementsByClassName('button'));
4+
5+
buttons.map(button => {
6+
button.addEventListener('click', (e) => {
7+
switch (e.target.innerText) {
8+
case 'C':
9+
display.innerText = '';
10+
break;
11+
case '=':
12+
try {
13+
display.innerText = eval(display.innerText);
14+
}
15+
catch {
16+
display.innerText = "Error"
17+
}
18+
break;
19+
case 'CE':
20+
if (display.innerText) {
21+
display.innerText = display.innerText.slice(0, -1);
22+
}
23+
break;
24+
case '%':
25+
try {
26+
display.innerText = display.innerText / 100;
27+
}
28+
catch {
29+
display.innerText = "Error"
30+
}
31+
break;
32+
default:
33+
display.innerText += e.target.innerText;
34+
}
35+
});
36+
});

‎26 - Calculator/style.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "sans";
6+
background-color: #19172e;
7+
color: white;
8+
user-select: none;
9+
}
10+
11+
@font-face {
12+
font-family: "sans";
13+
src: url(font/sans.ttf);
14+
}
15+
16+
h2 {
17+
top: 0;
18+
padding-top: 20px;
19+
color: white;
20+
font-size: 2rem;
21+
text-align: center;
22+
}
23+
24+
.container {
25+
max-width: 280px;
26+
margin: 50px auto 0;
27+
}
28+
29+
#display {
30+
text-align: right;
31+
height: 60px;
32+
padding-right: 10px;
33+
line-height: 80px;
34+
font-size: 1.5rem;
35+
border-radius: 15px 15px 0 0;
36+
background-color: white;
37+
color: black;
38+
}
39+
40+
.buttons {
41+
display: grid;
42+
grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr;
43+
}
44+
45+
.button {
46+
border: 0.5px solid white;
47+
line-height: 80px;
48+
text-align: center;
49+
font-size: 1.5rem;
50+
cursor: pointer;
51+
}
52+
53+
.button.left {
54+
border-radius: 0 0 0 15px;
55+
}
56+
57+
.button.right {
58+
border-radius: 0 0 15px 0;
59+
}
60+
61+
#equal {
62+
background-color: rgb(85, 85, 255);
63+
}
64+
65+
#equal:active {
66+
background-color: #1e8e3e !important;
67+
}
68+
69+
.button:active {
70+
background-color: #1e8e3e;
71+
}
72+
73+
footer {
74+
background-color: #19172e;
75+
text-align: center;
76+
color: white;
77+
font-size: 1rem;
78+
position: absolute;
79+
left: 0;
80+
right: 0;
81+
bottom: 0;
82+
padding: 5px;
83+
line-height: 3vh;
84+
}
85+
86+
footer a:visited {
87+
color: inherit;
88+
}

0 commit comments

Comments
 (0)