Skip to content

Commit 28379e3

Browse files
josueJUREjosueJURE
authored
Merge pull request #31 from josueJURE/local-storage
add .join().split() to get rid of the commas in the HTML
2 parents ee297e4 + cb9f1ea commit 28379e3

File tree

3 files changed

+185
-1
lines changed

3 files changed

+185
-1
lines changed

‎.vscode/index.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
outline: none;
6+
font-family: "Open Sans", sans-serif;
7+
background-color: aliceblue;
8+
list-style: none;
9+
}
10+
11+
body {
12+
height: 100vh;
13+
width: 100vw;
14+
border: red solid 1px;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
.parent {
21+
position: relative;
22+
height: 600px;
23+
width: 400px;
24+
border: black 1px solid;
25+
border-radius: 15px;
26+
overflow: hidden;
27+
28+
}
29+
30+
.sliding-part {
31+
position: absolute;
32+
height: 530px;
33+
width: 400px;
34+
border: black 1px solid;
35+
border-radius: 15px;
36+
overflow: hidden;
37+
display: grid;
38+
grid-template-columns: repeat(4, 1fr);
39+
column-gap: 10px;
40+
row-gap: 10px;
41+
padding: 10px;
42+
background-color: rgb(27 22 22 / 39%);
43+
transform: translateX(0px);
44+
transition: transform 1s;
45+
}
46+
47+
.computation-history-parent {
48+
visibility: hidden;
49+
}
50+
51+
.computation-history-parent.visility {
52+
visibility: visible;
53+
}
54+
55+
.computation-history {
56+
height: 490px;
57+
width: 400px;
58+
display: flex;
59+
flex-direction: column;
60+
padding-top: 10px;
61+
row-gap: 10px;
62+
}
63+
64+
.computation-history-parent > * {
65+
margin-left: 10px;
66+
}
67+
68+
69+
70+
.clear-history-btn {
71+
width: 100px;
72+
margin-top: -10px;
73+
74+
border-radius: 15px;
75+
display: none;
76+
77+
}
78+
79+
.clear-history-btn.display {
80+
display: block;
81+
82+
}
83+
84+
85+
86+
.history-btn,
87+
.child {
88+
border: 1px black solid;
89+
display: grid;
90+
justify-content: center;
91+
align-items: center;
92+
border-radius: 15px;
93+
}
94+
95+
.sliding-part.slide {
96+
transform: translateX(200px);
97+
transition: transform 1s;
98+
99+
100+
}
101+
102+
.screen {
103+
height: 70px;
104+
grid-column-start: 1;
105+
grid-column-end: 5;
106+
border-radius: 15px;
107+
display: grid;
108+
align-items: center;
109+
padding-left: 40px;
110+
}
111+
112+
.operator {
113+
background-color: orange;
114+
}
115+
116+
.symbol {
117+
background-color: grey;
118+
}
119+
120+
.child output {
121+
padding-left: 40px;
122+
}
123+
124+
.zero {
125+
grid-column-start: 1;
126+
grid-column-end: 2;
127+
}
128+
129+
130+

‎.vscode/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Calculator</title>
7+
<link rel="stylesheet" href="index.css">
8+
</head>
9+
<body>
10+
<div class="parent">
11+
<div data-screen class="screen">0</div>
12+
<div class="sliding-part">
13+
<div data-value="AC" class="child symbol">AC</div>
14+
<div data-value="minus" class="child symbol">+/-</div>
15+
<div data-value="%" data-operator class="child symbol">%</div>
16+
<div data-value="/" data-number class="child operator">÷</div>
17+
<div data-value="7" class="child digit">7</div>
18+
<div data-value="8" data-number class="child digit">8</div>
19+
<div data-value="9" class="child digit">9</div>
20+
<div data-value="*" data-operator class="child operator">x</div>
21+
<div data-value="4" class="child digit">4</div>
22+
<div data-value="5" class="child digit">5</div>
23+
<div data-value="6" class="child digit">6</div>
24+
<div data-value="-" data-operator class="child operator">-</div>
25+
<div data-value="1" class="child digit">1</div>
26+
<div data-value="2" class="child digit">2</div>
27+
<div data-value="3" class="child digit">3</div>
28+
<div data-value="+" data-operator class="child operator">+</div>
29+
<div data-value="0" class="child zero">0</div>
30+
<div data-value="DE" class="child DE">DE</div>
31+
<div data-value="." class="child">.</div>
32+
<div data-value="=" data-operator class="child operator">=</div>
33+
<div data-value="history" class="history-btn">history</div>
34+
<div data-value="(" data-operator class="child operator">(</div>
35+
<div data-value=")" data-operator class="child operator">)</div>
36+
</div>
37+
38+
<div class="computation-history-parent">
39+
<h3>history</h3>
40+
<ul class="computation-history"></ul>
41+
<button class="clear-history-btn">clear history</button>
42+
43+
</div>
44+
45+
46+
47+
48+
49+
50+
</div>
51+
</div>
52+
<script src="index.js"></script>
53+
</body>
54+
</html>

‎index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ function userClicksOnEqualButton(button) {
230230
} else {
231231
let result = eval(replacedArray.join(""));
232232
const history = getHistoryFromLocalStorage()
233-
history.push([...replacedArray, "=", result].join('').split(', ')); // Used slice() at first. But slice() is not sufficient because it only creates a shallow copy of the array, and modifications to the new array will still affect the original array. The spread syntax ([...replacedArray]), which creates a shallow copy as well, is a concise way to create a new array with the same elements as the existing array. While ensuring that modifications to historyEntries do not affect replacedArray, and vice versa.
233+
history.push([...replacedArray, "=", result].join('').split(',')); // Used slice() at first. But slice() is not sufficient because it only creates a shallow copy of the array, and modifications to the new array will still affect the original array. The spread syntax ([...replacedArray]), which creates a shallow copy as well, is a concise way to create a new array with the same elements as the existing array. While ensuring that modifications to historyEntries do not affect replacedArray, and vice versa
234234
replacedArray.splice(replacedArray.length, 0, "=", result);
235235
displayResult(replacedArray, result);
236236
screen.innerText = !Number.isFinite(result)

0 commit comments

Comments
 (0)