Skip to content

Commit ccb9c09

Browse files
josueJUREjosueJURE
authored
Merge pull request #16 from josueJURE/make-part-of-keyboard-slides
Make part of keyboard slides
2 parents 6e9f631 + 08c3ddd commit ccb9c09

File tree

3 files changed

+71
-23
lines changed

3 files changed

+71
-23
lines changed

‎index.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,29 @@ body {
2323
border-radius: 15px;
2424
overflow: hidden;
2525
display: grid;
26+
background-color: rgb(27 22 22 / 39%);
27+
justify-content: center;
28+
29+
}
30+
31+
.sliding-part {
32+
height: 530px;
33+
width: 400px;
34+
border: black 1px solid;
35+
border-radius: 15px;
36+
overflow: hidden;
37+
display: grid;
2638
grid-template-columns: repeat(4, 1fr);
2739
column-gap: 10px;
2840
row-gap: 10px;
2941
padding: 10px;
3042
background-color: rgb(27 22 22 / 39%);
43+
transform: translateX(0px);
44+
transition: transform 2s;
45+
46+
3147
}
32-
48+
.history-btn,
3349
.child {
3450
border: 1px black solid;
3551
display: grid;
@@ -38,7 +54,15 @@ body {
3854
border-radius: 15px;
3955
}
4056

57+
.sliding-part.slide {
58+
transform: translateX(200px);
59+
transition: transform 2s;
60+
61+
62+
}
63+
4164
.screen {
65+
height: 70px;
4266
grid-column-start: 1;
4367
grid-column-end: 5;
4468
border-radius: 15px;

‎index.html‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,38 @@
99
<body>
1010
<div class="parent">
1111
<div data-screen class="screen">0</div>
12-
<div data-value="AC" class="child symbol">AC</div>
13-
<div data-value="minus" class="child symbol">+/-</div>
14-
<div data-value="%" data-operator class="child symbol">%</div>
15-
<div data-value="/" data-number class="child operator">÷</div>
16-
<div data-value="7" class="child digit">7</div>
17-
<div data-value="8" data-number class="child digit">8</div>
18-
<div data-value="9" class="child digit">9</div>
19-
<div data-value="*" data-operator class="child operator">x</div>
20-
<div data-value="4" class="child digit">4</div>
21-
<div data-value="5" class="child digit">5</div>
22-
<div data-value="6" class="child digit">6</div>
23-
<div data-value="-" data-operator class="child operator">-</div>
24-
<div data-value="1" class="child digit">1</div>
25-
<div data-value="2" class="child digit">2</div>
26-
<div data-value="3" class="child digit">3</div>
27-
<div data-value="+" data-operator class="child operator">+</div>
28-
<div data-value="0" class="child zero">0</div>
29-
<div data-value="DE" class="child DE">DE</div>
30-
<div data-value="." class="child">.</div>
31-
<div data-value="=" data-operator class="child operator">=</div>
32-
<div data-value="(" data-operator class="child operator">(</div>
33-
<div data-value=")" data-operator class="child operator">)</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+
37+
38+
</div>
39+
40+
41+
42+
43+
3444
</div>
3545
</div>
3646
<script src="index.js"></script>

‎index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
const btns = document.querySelectorAll("[data-value]");
22
let screen = document.querySelector("[data-screen]");
3+
const historyBtn = document.querySelector(".history-btn");
4+
const slidingPart = document.querySelector(".sliding-part");
35
const operators = document.querySelectorAll("[data-operator]");
6+
47
const operatorRegex = /[\/*\-+]/;
58
const ZERO = 0;
69
const ZERO_DOT = '0.';
710
const history = [];
811

12+
console.log(slidingPart)
13+
14+
15+
historyBtn.addEventListener("click", () => {
16+
slidingPart.classList.toggle("slide")
17+
console.log("history btn")
18+
})
19+
20+
21+
22+
923
let data = [];
1024

1125
btns.forEach((btn) => {

0 commit comments

Comments
 (0)