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 1a8fe90

Browse files
update ui and logic
1 parent 0f632b6 commit 1a8fe90

File tree

6 files changed

+240
-119
lines changed

6 files changed

+240
-119
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
4343
| [Day 24](./each%20day%20build%20day!/Day%2024/) | [Pointer Highlighter](./each%20day%20build%20day!/Day%2024/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2024/README.md/) |
4444
| [Day 25](./each%20day%20build%20day!/Day%2025/) | [Event bubbling, capture and once](./each%20day%20build%20day!/Day%2025/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2025/README.md/) |
4545
| [Day 26](./each%20day%20build%20day!/Day%2026/) | [Text to Speech](./each%20day%20build%20day!/Day%2026/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2026/README.md/) |
46-
| [Day 27](./each%20day%20build%20day!/Day%2027/) | [Fancy Dropdown like stripe](./each%20day%20build%20day!/Day%2027/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2027/README.md/) |
46+
| [Day 27](./each%20day%20build%20day!/Day%2027/) | [Fancy Dropdown like stripe](./each%20day%20build%20day!/Day%2027/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2027/README.md/) |
47+
| [Day 28](./each%20day%20build%20day!/Day%2028/) | [Calculator](./each%20day%20build%20day!/Day%2028/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2028/README.md/) |

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
# Basic Calculator
22

3-
Implemented basic calculator functionality (addition, subtraction, multiplication, divison) using HTML, CSS & JS.
3+
Implemented basic calculator functionality (addition, subtraction, multiplication, divison) using HTML, CSS & JS.
4+
5+
# Challenges
6+
- CSS grid
7+
- js object
8+
9+
10+
# Demo
11+
12+
![](demo.png)

‎each day build day!/Day 28/demo.png

25.4 KB
Loading[フレーム]

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

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,40 @@
99
</head>
1010

1111
<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>
12+
<div class="calculator">
3113

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>
14+
<input type="text" class="calculator-screen" value="0" disabled />
15+
16+
<div class="calculator-keys">
17+
18+
<button type="button" class="operator" value="+">+</button>
19+
<button type="button" class="operator" value="-">-</button>
20+
<button type="button" class="operator" value="*">&times;</button>
21+
<button type="button" class="operator" value="/">&divide;</button>
22+
23+
<button type="button" value="7">7</button>
24+
<button type="button" value="8">8</button>
25+
<button type="button" value="9">9</button>
26+
27+
28+
<button type="button" value="4">4</button>
29+
<button type="button" value="5">5</button>
30+
<button type="button" value="6">6</button>
31+
32+
33+
<button type="button" value="1">1</button>
34+
<button type="button" value="2">2</button>
35+
<button type="button" value="3">3</button>
36+
37+
38+
<button type="button" value="0">0</button>
39+
<button type="button" class="decimal" value=".">.</button>
40+
<button type="button" class="all-clear" value="all-clear">AC</button>
41+
42+
<button type="button" class="equal-sign operator" value="=">=</button>
43+
3844
</div>
39-
</div>
45+
</div>
4046

4147
<script src="main.js" defer></script>
4248
</body>

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

Lines changed: 114 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,127 @@
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
1+
2+
const calculator ={
3+
displayValue:'0',
4+
firstOperand:null,
5+
waitingForSecond:false,
6+
operator:null
7+
}
8+
9+
10+
const performCalculations = {
11+
'+':(firstOperand, secondOperand) => firstOperand + secondOperand,
12+
'-':(firstOperand, secondOperand) => firstOperand - secondOperand,
13+
'*':(firstOperand, secondOperand) => firstOperand * secondOperand,
14+
'/':(firstOperand, secondOperand) => firstOperand / secondOperand,
15+
'=': (firstOperand, secondOperand) => secondOperand
16+
}
17+
18+
//resetting the calculator
19+
function resetCalculator(){
20+
calculator.displayValue = '0',
21+
calculator.firstOperand = null,
22+
calculator.waitingForSecond =false,
23+
calculator.operator = null
24+
}
25+
26+
27+
28+
function inputDigits(digit){
29+
const {displayValue, waitingForSecond} = calculator;
30+
31+
//handling display of second value after operator
32+
if(waitingForSecond === true){
33+
calculator.displayValue = digit;
34+
calculator.waitingForSecond = false;
35+
}else{
36+
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
37+
}
38+
39+
console.log(calculator)
40+
}
41+
42+
function inputDecimal(dot){
43+
if(calculator.waitingForSecond === true) return;
44+
45+
//else append a dot to the string
46+
if (!calculator.displayValue.includes(dot)) {
47+
// Append the decimal point
48+
calculator.displayValue += dot;
49+
}
50+
}
51+
52+
//Handling operators
53+
54+
function inputOperators(nextOperator){
55+
// case 1: when user enters first operator and hits a operator
56+
const {firstOperand, operator, displayValue, waitingForSecond} = calculator;
57+
const inputValue = parseFloat(displayValue);
58+
59+
//case 3: When a user enters two or more operators consecutively, i.e changes the operation
60+
if(operator && waitingForSecond === true){
61+
calculator.operator = nextOperator;
62+
return;
1663
}
1764

18-
display.textContent += key;
19-
console.log(enteredValues)
65+
66+
if(calculator.firstOperand === null){
67+
calculator.firstOperand = inputValue;
68+
}else if(operator){ //at this point we already have a operator and firstOperand
69+
//case 2: when user finishes the second operand and hits a key
70+
const currentValue = firstOperand || 0;
71+
const result = performCalculations[operator](currentValue,inputValue)
72+
73+
//now store this result to firstOperand for further calculations
74+
calculator.displayValue = String(result)
75+
calculator.firstOperand = result;
76+
}
77+
78+
calculator.waitingForSecond = true;
79+
calculator.operator = nextOperator;
2080
}
2181

22-
function calculate(){
82+
function handleInputs(e){
83+
const{target} = event; /* is equivalent to const target = event.target;*/
2384

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 === '-'){
85+
if(!target.matches('button')) return; // if clicked on div elsewhere
3486

35-
}else if(poopedItem === '/'){
87+
if(target.classList.contains('operator')){
88+
inputOperators(target.value);
89+
updateDisplay();
90+
return;
91+
}
3692

37-
}else if(poopedItem === '*'){
3893

39-
}else if()
94+
if(target.classList.contains('decimal')){
95+
inputDecimal(target.value);
96+
updateDisplay();
97+
return;
4098
}
4199

100+
101+
if(target.classList.contains('all-clear')){
102+
resetCalculator();
103+
updateDisplay();
104+
return;
105+
}
106+
107+
108+
if(target.classList.contains('clear')){
109+
110+
}
111+
112+
inputDigits(target.value);
113+
updateDisplay();
114+
42115
}
116+
//Handling key presses, we've four sets of keys (numeric, operator, decimal, AC )
117+
const keys = document.querySelector('.calculator-keys')
118+
keys.addEventListener('click',handleInputs)
119+
43120

44121

45-
keys.forEach(key => key.addEventListener('click',handleInput))
122+
function updateDisplay(){
123+
const display = document.querySelector('.calculator-screen')
124+
display.value = calculator.displayValue;
125+
}
126+
updateDisplay();
127+

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

Lines changed: 82 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,82 @@
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-
}
1+
html {
2+
font-size: 62.5%;
3+
box-sizing: border-box;
4+
}
5+
6+
*, *::before, *::after {
7+
margin: 0;
8+
padding: 0;
9+
box-sizing: inherit;
10+
}
11+
12+
.calculator {
13+
border: 1px solid #ccc;
14+
border-radius: 5px;
15+
position: absolute;
16+
top: 50%;
17+
left: 50%;
18+
transform: translate(-50%, -50%);
19+
width: 400px;
20+
}
21+
22+
.calculator-screen {
23+
width: 100%;
24+
font-size: 5rem;
25+
height: 80px;
26+
border: none;
27+
background-color: #252525;
28+
color: #fff;
29+
text-align: right;
30+
padding-right: 20px;
31+
padding-left: 10px;
32+
}
33+
34+
button {
35+
height: 60px;
36+
background-color: #fff;
37+
border-radius: 3px;
38+
border: 1px solid #c4c4c4;
39+
background-color: transparent;
40+
font-size: 2rem;
41+
color: #333;
42+
background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
43+
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
44+
text-shadow: 0 1px rgba(255,255,255,.4);
45+
}
46+
47+
button:hover {
48+
background-color: #eaeaea;
49+
}
50+
51+
.operator {
52+
color: #337cac;
53+
}
54+
55+
.all-clear {
56+
background-color: #f0595f;
57+
border-color: #b0353a;
58+
color: #fff;
59+
}
60+
61+
.all-clear:hover {
62+
background-color: #f17377;
63+
}
64+
65+
.equal-sign {
66+
background-color: #2e86c0;
67+
border-color: #337cac;
68+
color: #fff;
69+
height: 100%;
70+
grid-area: 2 / 4 / 6 / 5;
71+
}
72+
73+
.equal-sign:hover {
74+
background-color: #4e9ed4;
75+
}
76+
77+
.calculator-keys {
78+
display: grid;
79+
grid-template-columns: repeat(4, 1fr);
80+
grid-gap: 20px;
81+
padding: 20px;
82+
}

0 commit comments

Comments
(0)

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