Skip to content

Commit 1a8fe90

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