Skip to content

Commit 0f632b6

Browse files
fullstackNRJfullstackNRJ
committed
day 28
1 parent 4e2088b commit 0f632b6

File tree

4 files changed

+151
-0
lines changed

4 files changed

+151
-0
lines changed

‎each day build day!/Day 28/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Calculator
2+
3+
Implemented basic calculator functionality (addition, subtraction, multiplication, divison) using HTML, CSS & JS.

‎each day build day!/Day 28/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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="display"></div>
14+
<div class="calc">
15+
<div class="helper">
16+
<div class="keys C" data-key="clear">C</div>
17+
<div class="keys AC" date-key="clear">AC</div>
18+
<div class="keys bcksp" data-key="erase"> ↩ </div>
19+
</div>
20+
<div class="numeric">
21+
<div class="keys" data-key="7">7</div>
22+
<div class="keys" data-key="8">8</div>
23+
<div class="keys" data-key="9">9</div>
24+
<div class="keys" data-key="4">4</div>
25+
<div class="keys" data-key="5">5</div>
26+
<div class="keys" data-key="6">6</div>
27+
<div class="keys" data-key="1">1</div>
28+
<div class="keys" data-key="2">2</div>
29+
<div class="keys" data-key="3">3</div>
30+
<div class="keys" data-key="0">0</div>
31+
32+
<div class="keys symbol" data-key="+">+</div>
33+
<div class="keys symbol" data-key="-">-</div>
34+
<div class="keys symbol" data-key="/">/</div>
35+
<div class="keys symbol" data-key="*">*</div>
36+
<button class="btn" onclick="calculate()">=</button>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<script src="main.js" defer></script>
42+
</body>
43+
44+
</html>

‎each day build day!/Day 28/main.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const keys = document.querySelectorAll('.keys');
2+
const display = document.querySelector('.display');
3+
4+
let enteredValues = [];
5+
6+
function handleInput(e){
7+
this.classList.add('is-pressed')
8+
//console.log(e.target.dataset.key)
9+
setTimeout(()=>this.classList.remove('is-pressed'),100)
10+
const key = e.target.dataset.key;
11+
enteredValues.push(key);
12+
valueBefore = "";
13+
valueAfter = "";
14+
if(key === '+'){
15+
valueBefore
16+
}
17+
18+
display.textContent += key;
19+
console.log(enteredValues)
20+
}
21+
22+
function calculate(){
23+
24+
valueB4="";
25+
valueFTR ="";
26+
result = 0;
27+
item = [...enteredValues];
28+
i = item.length;
29+
while(i > 0){
30+
poopedItem = item.shift();
31+
if(poopedItem === '+'){
32+
result = parseFloat(valueB4) + parseFloat(valueFTR)
33+
}else if(poopedItem === '-'){
34+
35+
}else if(poopedItem === '/'){
36+
37+
}else if(poopedItem === '*'){
38+
39+
}else if()
40+
}
41+
42+
}
43+
44+
45+
keys.forEach(key => key.addEventListener('click',handleInput))

‎each day build day!/Day 28/style.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.container{
2+
height:300px;
3+
width:min-content;
4+
margin: 20px auto;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content:center;
8+
align-items: center;
9+
background-color: rgb(117, 121, 121);
10+
11+
}
12+
13+
.display{
14+
display: flex;
15+
text-align: center;
16+
justify-content: flex-end;
17+
align-items: flex-end;
18+
height: 30px;
19+
width: 150px;
20+
background-color: rgb(197, 200, 202);
21+
}
22+
.helper{
23+
display: flex;
24+
justify-content: flex-end;
25+
}
26+
.calc{
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: flex-end;
30+
}
31+
32+
.numeric{
33+
34+
display:grid;
35+
grid-template-columns: repeat(3,1fr);
36+
grid-template-rows: repeat(4,1fr);
37+
38+
}
39+
40+
.keys{
41+
border: 1px solid #333;
42+
cursor: pointer;
43+
font-size: 2em;
44+
text-align: center;
45+
transition: all .1s ease;
46+
}
47+
48+
.is-pressed{
49+
font-size: 1em;
50+
background-color: #eee;
51+
}
52+
.keys .symbol{
53+
54+
}
55+
56+
.btn{
57+
background-color:rgb(117, 121, 121);
58+
cursor: pointer;
59+
}

0 commit comments

Comments
 (0)