Skip to content

Commit ccde81c

Browse files
reitenthreitenth
authored
Add files via upload
1 parent ace2a4a commit ccde81c

4 files changed

Lines changed: 270 additions & 0 deletions

File tree

‎foundations/05-calculator/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# odin-calculator
2+
3+
**Time Spent:** 10-12 hrs coding, not sure on studying but pretty close to the same amount probably.
4+
5+
**What I Learned:** How to keep moving forward when I got stuck and frustrated. This was the first project where the puzzle pieces didn't fall into place and it took multiple days to grasp what was not very much actual code.
6+
7+
**What Was Difficult:** Toughest project so far. Getting things from the 'current' screen to 'previous' took time and some help from the folks on Discord.

‎foundations/05-calculator/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
<title>Calculator</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="displayrow">
14+
<div class="toprow"></div>
15+
<div class="bottomrow"></div>
16+
</div>
17+
<div class="clearrow">
18+
<button id="clear">CLEAR</button>
19+
<button id="delete">DELETE</button>
20+
</div>
21+
<div class="numbercontainer">
22+
<button class=number>7</button>
23+
<button class=number>8</button>
24+
<button class=number>9</button>
25+
<button class=operator>/</button>
26+
<button class=number>4</button>
27+
<button class=number>5</button>
28+
<button class=number>6</button>
29+
<button class=operator>x</button>
30+
<button class=number>1</button>
31+
<button class=number>2</button>
32+
<button class=number>3</button>
33+
<button class=operator>-</button>
34+
<button class=number>.</button>
35+
<button class=number>0</button>
36+
<button class=equal>=</button>
37+
<button class=operator>+</button>
38+
</div>
39+
</div>
40+
41+
<div class="footer">
42+
<a href="https://github.com/reitenth">reitenth</a> |
43+
<a href="https://github.com/reitenth/odin-calculator">Source Code</a>
44+
</div>
45+
46+
<script src="./script.js"></script>
47+
</body>
48+
49+
50+
</html>

‎foundations/05-calculator/script.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// default values
2+
3+
let operator = "";
4+
let previousValue = "";
5+
let currentValue = "";
6+
7+
// html dom into javascript
8+
9+
const clearButton = document.querySelector("#clear");
10+
const deleteButton = document.querySelector("#delete");
11+
const numberButton = document.querySelectorAll(".number");
12+
const operatorButton = document.querySelectorAll(".operator");
13+
const currentScreen = document.querySelector(".bottomrow");
14+
const previousScreen = document.querySelector(".toprow");
15+
const equalNumber = document.querySelector(".equal");
16+
17+
// display number when one is clicked to current screen
18+
19+
numberButton.forEach((numberClick) =>
20+
numberClick.addEventListener("click", function (e) {
21+
handleNumber(e.target.textContent);
22+
currentScreen.textContent = currentValue;
23+
})
24+
);
25+
26+
// display operator to previous screen along with previous value
27+
28+
operatorButton.forEach((operatorClick) =>
29+
operatorClick.addEventListener("click", function (e) {
30+
handleOperator(e.target.textContent);
31+
previousScreen.textContent = previousValue + " " + operator;
32+
currentScreen.textContent = currentValue;
33+
})
34+
);
35+
36+
// number function, if current value is <=5 add a number digit
37+
38+
function handleNumber(number) {
39+
if (currentValue.length <= 5) {
40+
currentValue += number;
41+
}
42+
}
43+
44+
// operator function
45+
46+
function handleOperator(operatorClick) {
47+
operator = operatorClick;
48+
previousValue = currentValue;
49+
currentValue = "";
50+
}
51+
52+
// clear button, makes operator and values blank followed by the screens blank
53+
54+
clearButton.addEventListener("click", () => {
55+
operator = "";
56+
previousValue = "";
57+
currentValue = "";
58+
previousScreen.textContent = currentValue;
59+
currentScreen.textContent = currentValue;
60+
});
61+
62+
// delete button, removes one digit from current screen and stores it as current value
63+
64+
deleteButton.addEventListener("click", function deleteNumber() {
65+
currentScreen.textContent = currentScreen.textContent.slice(0, -1);
66+
currentValue = currentScreen.textContent;
67+
});
68+
69+
// equal button, doesn't do anything if current value and previous screen are blank. runs operate and round number functions
70+
71+
equalNumber.addEventListener("click", function () {
72+
if (currentValue != "" && previousScreen != "") {
73+
previousScreen.textContent =
74+
previousValue + " " + operator + " " + currentValue + " " + "=";
75+
operate();
76+
roundNumber();
77+
}
78+
});
79+
80+
// operate function, changes values from strings to numbers, then +-x/ previous value by current value
81+
82+
function operate() {
83+
previousValue = Number(previousValue);
84+
currentValue = Number(currentValue);
85+
86+
if (operator === "+") {
87+
previousValue += currentValue;
88+
} else if (operator === "-") {
89+
previousValue -= currentValue;
90+
} else if (operator === "x") {
91+
previousValue *= currentValue;
92+
} else {
93+
previousValue /= currentValue;
94+
}
95+
currentScreen.textContent = roundNumber(previousValue);
96+
}
97+
98+
// rounds previous value to 3 decimal places
99+
100+
function roundNumber(previousValue) {
101+
return Math.round(previousValue * 1000) / 1000;
102+
}

‎foundations/05-calculator/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
body {
2+
background-color: #2e3440;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
flex-direction: column;
8+
}
9+
10+
.container {
11+
background-color: #d8dee9;
12+
border: black solid 2px;
13+
border-radius: 10px;
14+
height: 50vh;
15+
width: 40vh;
16+
display: flex;
17+
align-items: center;
18+
flex-direction: column;
19+
justify-content: center;
20+
}
21+
22+
.displayrow {
23+
display: flex;
24+
flex-direction: column;
25+
background-color: #eceff4;
26+
border: black solid 2px;
27+
border-radius: 5px;
28+
width: 35vh;
29+
height: 10vh;
30+
justify-content: space-between;
31+
}
32+
33+
.toprow,
34+
.bottomrow {
35+
text-align: end;
36+
margin-right: 20px;
37+
margin-bottom: 10px;
38+
margin-top: 10px;
39+
}
40+
41+
.toprow {
42+
font-size: medium;
43+
}
44+
45+
.bottomrow {
46+
font-weight: bolder;
47+
font-size: xx-large;
48+
}
49+
50+
.clearrow {
51+
display: grid;
52+
gap: 10px;
53+
width: 35vh;
54+
margin-top: 10px;
55+
grid-template-columns: repeat(2, 1fr);
56+
}
57+
58+
#clear,
59+
#delete {
60+
background-color: lightcoral;
61+
text-align: center;
62+
border: black solid 2px;
63+
border-radius: 5px;
64+
padding: 15px 20px 15px 20px;
65+
flex-grow: 3;
66+
}
67+
68+
#delete {
69+
background-color: lightskyblue;
70+
}
71+
72+
.numbercontainer {
73+
display: grid;
74+
gap: 10px;
75+
width: 35vh;
76+
margin-top: 10px;
77+
grid-template-columns: repeat(4, 1fr);
78+
}
79+
80+
button {
81+
background-color: #eceff4;
82+
padding: 20px;
83+
flex-grow: 1;
84+
text-align: center;
85+
border: black solid 2px;
86+
border-radius: 5px;
87+
}
88+
89+
button:hover {
90+
background-color: #d8dee9;
91+
transform: scale(1.05);
92+
cursor: pointer;
93+
}
94+
95+
.footer {
96+
gap: 10px;
97+
margin-top: 20px;
98+
width: 40vh;
99+
text-align: center;
100+
}
101+
102+
.footer > a {
103+
color: #d8dee9;
104+
text-decoration: none;
105+
transition: 1s;
106+
}
107+
108+
.footer > a:hover {
109+
border-bottom: 1px solid #d8dee9;
110+
color: rgba(252, 252, 252, 0.849);
111+
}

0 commit comments

Comments
 (0)