Skip to content

Commit bf1e897

Browse files
abuz33abuz33
committed
Added calculator
1 parent d41b043 commit bf1e897

2 files changed

Lines changed: 251 additions & 0 deletions

File tree

‎Week1/Calculator/index.html‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<link rel="stylesheet" href="style.css" />
9+
<title>Calculator</title>
10+
</head>
11+
12+
<body>
13+
<h1>HTML Calculator</h1>
14+
<div class="calc-parent">
15+
<div class="row">
16+
<div class="column" id="calc-display-val">0</div>
17+
</div>
18+
<div class="row">
19+
<div class="calc-btn column" id="calc-clear">AC</div>
20+
<div class="calc-btn column" id="calc-backspace">&#8676;</div>
21+
<div class="calc-btn calc-btn-operator column" id="calc-divide">
22+
&#247;
23+
</div>
24+
</div>
25+
<div class="row">
26+
<div class="calc-btn calc-btn-num column" id="calc-seven">7</div>
27+
<div class="calc-btn calc-btn-num column" id="calc-eight">8</div>
28+
<div class="calc-btn calc-btn-num column" id="calc-nine">9</div>
29+
<div class="calc-btn calc-btn-operator column" id="calc-multiply">
30+
x
31+
</div>
32+
</div>
33+
<div class="row">
34+
<div class="calc-btn calc-btn-num column" id="calc-four">4</div>
35+
<div class="calc-btn calc-btn-num column" id="calc-five">5</div>
36+
<div class="calc-btn calc-btn-num column" id="calc-six">6</div>
37+
<div class="calc-btn calc-btn-operator column" id="calc-plus">+</div>
38+
</div>
39+
<div class="row">
40+
<div class="calc-btn calc-btn-num column" id="calc-one">1</div>
41+
<div class="calc-btn calc-btn-num column" id="calc-two">2</div>
42+
<div class="calc-btn calc-btn-num column" id="calc-three">3</div>
43+
<div class="calc-btn calc-btn-operator column" id="calc-minus">-</div>
44+
</div>
45+
<div class="row">
46+
<div class="calc-btn calc-btn-num column" id="calc-zero">0</div>
47+
<div class="calc-btn column" id="calc-decimal">.</div>
48+
<div class="calc-btn calc-btn-operator column" id="calc-equals">=</div>
49+
</div>
50+
</div>
51+
52+
<script>
53+
54+
let zeroBtn = document.getElementById("calc-zero");
55+
let oneBtn = document.getElementById("calc-one");
56+
let twoBtn = document.getElementById("calc-two");
57+
let threeBtn = document.getElementById("calc-three");
58+
let fourBtn = document.getElementById("calc-four");
59+
let fiveBtn = document.getElementById("calc-fivee");
60+
let sixBtn = document.getElementById("calc-six");
61+
let sevenBtn = document.getElementById("calc-seven");
62+
let eightBtn = document.getElementById("calc-eight");
63+
let nineBtn = document.getElementById("calc-nine");
64+
65+
let decimalBtn = document.getElementById("calc-decimal");
66+
let clearBtn = document.getElementById("calc-clear");
67+
let backspaceBtn = document.getElementById("calc-backspace");
68+
let displayValElement = document.getElementById("calc-display-val");
69+
70+
displayVal = '0';
71+
let pendingVal;
72+
let evalStringVal = [];
73+
74+
let numBtns = document.getElementsByClassName("calc-btn-num");
75+
let operatorBtns = document.getElementsByClassName("calc-btn-operator");
76+
77+
let updateDisplayVal = (clickObj) => {
78+
var btnText = clickObj.target.innerText;
79+
80+
if (displayVal === '0')
81+
displayVal = '';
82+
83+
displayVal += btnText;
84+
displayValElement.innerText = displayVal;
85+
86+
};
87+
88+
var performOperation = (clickObj) => {
89+
var operator = clickObj.target.innerText;
90+
91+
switch (operator) {
92+
case "+":
93+
pendingVal = displayVal;
94+
displayVal = '0';
95+
displayValElement.innerText = displayVal;
96+
evalStringVal.push(pendingVal)
97+
evalStringVal.push('+')
98+
break;
99+
100+
case "-":
101+
pendingVal = displayVal;
102+
displayVal = '0';
103+
displayValElement.innerText = displayVal;
104+
evalStringVal.push(pendingVal);
105+
evalStringVal.push('-');
106+
break;
107+
108+
case "x":
109+
pendingVal = displayVal;
110+
displayVal = '0';
111+
displayValElement.innerText = displayVal;
112+
evalStringVal.push(pendingVal);
113+
evalStringVal.push('*');
114+
break;
115+
116+
case "÷":
117+
pendingVal = displayVal;
118+
displayVal = '0';
119+
displayValElement.innerText = displayVal;
120+
evalStringVal.push(pendingVal);
121+
evalStringVal.push('/');
122+
break;
123+
case "=":
124+
evalStringVal.push(displayVal);
125+
var evaluation = eval(evalStringVal.join(' '));
126+
displayVal = evaluation + '';
127+
displayValElement.innerText = displayVal;
128+
evalStringVal = [];
129+
130+
break;
131+
132+
default:
133+
break;
134+
}
135+
}
136+
137+
for (let i = 0; i < numBtns.length; i++) {
138+
numBtns[i].addEventListener("click", updateDisplayVal, false);
139+
}
140+
141+
for (let i = 0; i < operatorBtns.length; i++) {
142+
operatorBtns[i].addEventListener("click", performOperation, false);
143+
}
144+
145+
146+
clearBtn.onclick = () => {
147+
displayVal = '0';
148+
pendingVal = undefined;
149+
evalStringVal = [];
150+
displayValElement.innerHTML = displayVal;
151+
}
152+
153+
backspaceBtn.onclick = () => {
154+
let lengthOfDisplayVal = displayVal.length;
155+
displayVal = displayVal.slice(0, lengthOfDisplayVal - 1);
156+
157+
if (displayVal === '')
158+
displayVal = '0';
159+
160+
161+
displayValElement.innerText = displayVal;
162+
}
163+
164+
decimalBtn.onclick = () => {
165+
166+
if (!displayVal.includes('.'))
167+
displayVal += '.';
168+
169+
170+
displayValElement.innerText = displayVal;
171+
}
172+
173+
174+
</script>
175+
</body>
176+
177+
</html>

‎Week1/Calculator/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@import url("https://fonts.googleapis.com/css?family=Roboto:100&display=swap");
2+
3+
body {
4+
font-family: "Roboto", sans-serif;
5+
user-select: none;
6+
}
7+
8+
h1 {
9+
text-align: center;
10+
margin-top: 50px;
11+
}
12+
13+
.calc-parent {
14+
margin-left: calc(50% - 125px);
15+
}
16+
.calc-btn {
17+
background-color: silver;
18+
color: #000;
19+
width: 25px;
20+
height: 45px;
21+
border: 1px solid gray;
22+
text-align: center;
23+
cursor: pointer;
24+
font-size: 32px;
25+
font-weight: 100;
26+
padding-top: 3px;
27+
}
28+
29+
.calc-btn:hover {
30+
background-color: orange;
31+
}
32+
33+
.row {
34+
display: table;
35+
table-layout: fixed;
36+
width: 250px;
37+
}
38+
39+
.column {
40+
display: table-cell;
41+
}
42+
43+
#calc-zero {
44+
width: 52.66666667px;
45+
border-radius: 0 0 0 7px;
46+
}
47+
48+
#calc-clear {
49+
width: 52.66666667px;
50+
}
51+
52+
#calc-equals {
53+
border-radius: 0 0 7px 0;
54+
}
55+
56+
#calc-display-val {
57+
height: 80px;
58+
color: white;
59+
text-align: right;
60+
border-right: 1px solid gray;
61+
border-left: 1px solid gray;
62+
border-top: 1px solid gray;
63+
font-size: 48px;
64+
background-color: #383838;
65+
overflow: hidden;
66+
white-space: nowrap;
67+
padding: 12px 12px 0 12px;
68+
border-radius: 7px 7px 0 0;
69+
}
70+
71+
.calc-btn-operator {
72+
background-color: orange;
73+
color: white;
74+
}

0 commit comments

Comments
 (0)