Skip to content

Commit 1ecedee

Browse files
eastermukoraeastermukora
committed
Calculator Review
Reviewed the calculator. 1. centered the application 2. added a title 3. changed to a supported font
1 parent 30627df commit 1ecedee

File tree

4 files changed

+249
-3
lines changed

4 files changed

+249
-3
lines changed

‎README.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# webChallenges
2-
web calculator
2+
web calculator challenge
33

44

5-
Add code pen links to your calculator....An immitation of https://btholt.github.io/intro-to-web-dev-v2/calculator.html
6-
Easter Mukora: https://codepen.io/E-M34N/pen/XWWbeMa
5+
Add code pen links to your calculator:
6+
An imitation of https://btholt.github.io/intro-to-web-dev-v2/calculator.html
7+
8+
1. Easter Mukora: https://codepen.io/E-M34N/pen/XWWbeMa

‎calculator.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Calculator</title>
6+
<link rel="stylesheet" href="style.css">
7+
<link href='https://fonts.googleapis.com/css?family=JetBrains Mono' rel='stylesheet'>
8+
<script src="https://kit.fontawesome.com/8ea8c7382e.js" crossorigin="anonymous"></script>
9+
</head>
10+
11+
<body>
12+
<div class="header">
13+
<span class="calc-title"> DSC Web Calculator Challenge </span>
14+
</div>
15+
<div class="container">
16+
<div class="calc">
17+
<section class="screen">
18+
0
19+
</section>
20+
21+
<section class="calc-buttons">
22+
<div class="calc-button-row">
23+
<button class="calc-button double ">C</button>
24+
<button class="calc-button">del</button>
25+
<button class="calc-button">/</button>
26+
</div>
27+
<div class="calc-button-row">
28+
<button class="calc-button">7</button>
29+
<button class="calc-button">8</button>
30+
<button class="calc-button">9</button>
31+
<button class="calc-button">*</button>
32+
</div>
33+
<div class="calc-button-row">
34+
<button class="calc-button">4</button>
35+
<button class="calc-button">5</button>
36+
<button class="calc-button">6</button>
37+
<button class="calc-button">-</button>
38+
</div>
39+
<div class="calc-button-row">
40+
<button class="calc-button">1</button>
41+
<button class="calc-button">2</button>
42+
<button class="calc-button">3</button>
43+
<button class="calc-button">+</button>
44+
</div>
45+
<div class="calc-button-row">
46+
<button class="calc-button triple">0</button>
47+
<button class="calc-button">=</button>
48+
</div>
49+
</section>
50+
</div>
51+
</div>
52+
<script src="script.js"></script>
53+
</body>
54+
55+
</html>

‎script.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
let runningTotal = 0;
2+
let buffer = "0";
3+
let previousOperator;
4+
const screen = document.querySelector(".screen");
5+
6+
function buttonClick(value) {
7+
if (isNaN(parseInt(value))) {
8+
handleSymbol(value);
9+
} else {
10+
handleNumber(value);
11+
}
12+
rerender();
13+
}
14+
15+
function handleNumber(value) {
16+
if (buffer === "0") {
17+
buffer = value;
18+
} else {
19+
buffer += value;
20+
}
21+
}
22+
23+
function handleMath(value) {
24+
if (buffer === "0") {
25+
// do nothing
26+
return;
27+
}
28+
29+
const intBuffer = parseInt(buffer);
30+
if (runningTotal === 0) {
31+
runningTotal = intBuffer;
32+
} else {
33+
flushOperation(intBuffer);
34+
}
35+
36+
previousOperator = value;
37+
38+
buffer = "0";
39+
}
40+
41+
function flushOperation(intBuffer) {
42+
if (previousOperator === "+") {
43+
runningTotal += intBuffer;
44+
} else if (previousOperator === "-") {
45+
runningTotal -= intBuffer;
46+
} else if (previousOperator === "*") {
47+
runningTotal *= intBuffer;
48+
} else {
49+
runningTotal /= intBuffer;
50+
}
51+
}
52+
53+
function handleSymbol(value) {
54+
switch (value) {
55+
case "C":
56+
buffer = "0";
57+
runningTotal = 0;
58+
break;
59+
case "=":
60+
if (previousOperator === null) {
61+
// need two numbers to do math
62+
return;
63+
}
64+
flushOperation(parseInt(buffer));
65+
previousOperator = null;
66+
buffer = +runningTotal;
67+
runningTotal = 0;
68+
break;
69+
case "del":
70+
if (buffer.length === 1) {
71+
buffer = "0";
72+
} else {
73+
buffer = buffer.substring(0, buffer.length - 1);
74+
}
75+
break;
76+
case "+":
77+
case "-":
78+
case "*":
79+
case "/":
80+
handleMath(value);
81+
break;
82+
}
83+
}
84+
85+
function rerender() {
86+
screen.innerText = buffer;
87+
}
88+
89+
function init() {
90+
document.querySelector(".calc-buttons").addEventListener("click", function(event) {
91+
buttonClick(event.target.innerText);
92+
});
93+
}
94+
95+
init();

‎style.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body{
6+
width: fit-content;
7+
background-color: #382a1c;
8+
color: white;
9+
align-items: center;
10+
margin: auto;
11+
padding: 7px;
12+
font-family: "JetBrains Mono", serif;
13+
}
14+
15+
.calc-title {
16+
font-size: 25px;
17+
font-family: "JetBrains Mono", serif;
18+
}
19+
20+
.container {
21+
padding: 80px;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
font-size: 25px;
26+
font-family: "JetBrains Mono", serif;
27+
}
28+
29+
.calc {
30+
border-radius: 7px;
31+
width: 300px;
32+
background-color: black;
33+
color: white;
34+
font-family: "JetBrains Mono", serif;
35+
}
36+
37+
.screen {
38+
color: white;
39+
font-size: 30px;
40+
font-family: "JetBrains Mono", serif;
41+
text-align: right;
42+
padding: 20px 5px;
43+
}
44+
45+
.calc-button {
46+
background-color: #d8d9db;
47+
color: black;
48+
height: 80px;
49+
width: 24.5%;
50+
border: none;
51+
border-radius: 1px;
52+
font-size: 40px;
53+
cursor: pointer;
54+
}
55+
56+
.calc-button:hover {
57+
background-color: rgba(88, 73, 56, 0.93);
58+
}
59+
60+
.calc-button:active {
61+
background-color: #bbbcbe;
62+
}
63+
64+
.double {
65+
width: 49.7%;
66+
}
67+
68+
.triple {
69+
width: 74.8%;
70+
}
71+
72+
.calc-button:last-child {
73+
background-color: #df974c;
74+
color: white;
75+
}
76+
77+
.calc-button:last-child:hover {
78+
background-color: #dfb07e;
79+
}
80+
81+
.calc-button:last-child:active {
82+
background-color: #dd8d37;
83+
}
84+
85+
.calc-button-row {
86+
display: flex;
87+
align-content: stretch;
88+
justify-content: space-between;
89+
margin-bottom: 0.5%;
90+
}
91+
92+
.calc-button-row:last-child {
93+
padding-bottom: 0;
94+
}

0 commit comments

Comments
 (0)