Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0f632b6

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /