Skip to content

Commit 9c74749

Browse files
Shreekant-04Shreekant-04
committed
calculator added
1 parent 2b12810 commit 9c74749

File tree

5 files changed

+199
-0
lines changed

5 files changed

+199
-0
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -148,5 +148,10 @@
148148
<td><a href="ClickAndDrag">Click And Drag</a></td>
149149
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/ClickAndDrag/">Link</a></td>
150150
</tr>
151+
<tr>
152+
<td>28</td>
153+
<td><a href="calculator">Calculator</a></td>
154+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/calculator/">Link</a></td>
155+
</tr>
151156
</tbody>
152157
</table>

‎calculator/app.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
console.log("hello");
2+
let buttons = document.querySelectorAll(".button");
3+
let input = document.querySelector("#text");
4+
let result = document.querySelector(".result");
5+
6+
let str = "";
7+
let displayStr = "";
8+
buttons.forEach((el) => {
9+
el.addEventListener("click", (e) => {
10+
if (
11+
el.innerText === "=" ||
12+
el.innerText === "Ac" ||
13+
el.innerText === "C" ||
14+
el.innerText === "%"
15+
) {
16+
handleEvent(e);
17+
} else {
18+
str += el.innerText;
19+
displayStr += el.innerText;
20+
calculate(str, displayStr);
21+
}
22+
});
23+
});
24+
25+
function calculate(str, displayStr) {
26+
let rawResult = String(str);
27+
input.value = displayStr;
28+
let end = rawResult.charAt(rawResult.length - 1);
29+
if (end === "/" || end === "+" || end === "*" || end === "-") {
30+
return;
31+
} else {
32+
if (rawResult === "") {
33+
result.value = 0;
34+
} else {
35+
result.value = eval(rawResult);
36+
}
37+
}
38+
}
39+
function handleEvent(e) {
40+
const val = e.target.innerText;
41+
switch (val) {
42+
case "Ac":
43+
str = "";
44+
displayStr = "";
45+
break;
46+
case "C":
47+
str = str.slice(0, -1);
48+
displayStr = displayStr.slice(0, -1);
49+
50+
break;
51+
case "%":
52+
displayStr += e.target.innerText;
53+
str += "*1/100";
54+
55+
break;
56+
default:
57+
displayStr = "";
58+
break;
59+
}
60+
calculate(str, displayStr);
61+
}

‎calculator/index.html

+47
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="style.css" />
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<section class="wrapper">
12+
<section class="input">
13+
<input type="text" name="text" id="text" value="0" />
14+
<input type="text" class="result" />
15+
</section>
16+
<section class="buttons">
17+
<div class="button clear-all funct">Ac</div>
18+
<div class="button">7</div>
19+
<div class="button">4</div>
20+
<div class="button">1</div>
21+
<div class="button">00</div>
22+
</section>
23+
<section class="buttons">
24+
<div class="button clear funct">C</div>
25+
<div class="button">8</div>
26+
<div class="button">5</div>
27+
<div class="button">2</div>
28+
<div class="button">0</div>
29+
</section>
30+
<section class="buttons">
31+
<div class="button funct">%</div>
32+
<div class="button">9</div>
33+
<div class="button">6</div>
34+
<div class="button">3</div>
35+
<div class="button">.</div>
36+
</section>
37+
<section class="buttons">
38+
<div class="button funct">/</div>
39+
<div class="button funct">*</div>
40+
<div class="button funct">-</div>
41+
<div class="button funct">+</div>
42+
<div class="button value funct">=</div>
43+
</section>
44+
</section>
45+
<script src="app.js"></script>
46+
</body>
47+
</html>

‎calculator/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
6+
font-size: calc(5px + 1vw);
7+
user-select: none;
8+
}
9+
body{
10+
height: 100vh;
11+
width: 100vw;
12+
display: flex;
13+
justify-content:center;
14+
align-items: center;
15+
background-color: black;
16+
}
17+
.wrapper{
18+
width: 20vw;
19+
height: 60vh;
20+
margin-left: 10px;
21+
display: flex;
22+
justify-content: center;
23+
align-items: flex-start;
24+
column-gap: 5%;
25+
flex-wrap: wrap;
26+
padding: 10px;
27+
border-radius: 20px;
28+
box-shadow: 0 0 5px #fff;
29+
}
30+
.input{
31+
width: 100%;
32+
}
33+
34+
#text, .result{
35+
width: 100%;
36+
outline: none;
37+
text-align: end;
38+
padding: 5px;
39+
background-color: transparent;
40+
color: #fff;
41+
border: none;
42+
43+
}
44+
#text{
45+
height: 6vmin;
46+
}
47+
.result{
48+
height: 4vmin;
49+
font-size: calc(5px + 0.7vw);
50+
51+
}
52+
.buttons{
53+
border: 2px solid black;
54+
55+
56+
}
57+
.button{
58+
height: 7vmin;
59+
width: 7vmin;
60+
display: flex;
61+
justify-content: center;
62+
align-items: center;
63+
border-radius: 50%;
64+
margin-top: 10px;
65+
background-color: black;
66+
color: #fff;
67+
box-shadow: 0 0 10px rgb(71, 50, 50) inset;
68+
cursor: pointer;
69+
}
70+
.buttons>div:active{
71+
box-shadow: 0 0 10px rgb(71, 50, 50) ;
72+
font-size: calc(5px + 1.2vw);
73+
74+
75+
76+
}
77+
.funct{
78+
color: orange;
79+
}

‎index.html

+7
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,13 @@
209209
<a href="./ClickAndDrag/index.html" target="_blank">Link</a>
210210
</td>
211211
</tr>
212+
<tr>
213+
<td>28</td>
214+
<td>Calculator</td>
215+
<td>
216+
<a href="./calculator/index.html" target="_blank">Link</a>
217+
</td>
218+
</tr>
212219
</tbody>
213220
</table>
214221
</body>

0 commit comments

Comments
 (0)