From 7be75584798165e5e781fce7d3b40b3ad0789d49 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Mon, 25 Dec 2023 11:06:03 +0000 Subject: [PATCH 1/9] feat(JS): create history button --- index.css | 1 + index.html | 49 +++++++++++++++++++++++++++---------------------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/index.css b/index.css index 9e4d166..8216806 100644 --- a/index.css +++ b/index.css @@ -30,6 +30,7 @@ body { background-color: rgb(27 22 22 / 39%); } +.history, .child { border: 1px black solid; display: grid; diff --git a/index.html b/index.html index 32b413e..7b8c8a2 100644 --- a/index.html +++ b/index.html @@ -9,28 +9,33 @@
0
-
AC
-
+/-
-
%
-
÷
-
7
-
8
-
9
-
x
-
4
-
5
-
6
-
-
-
1
-
2
-
3
-
+
-
0
-
DE
-
.
-
=
-
(
-
)
+ +
AC
+
+/-
+
%
+
÷
+
7
+
8
+
9
+
x
+
4
+
5
+
6
+
-
+
1
+
2
+
3
+
+
+
0
+
DE
+
.
+
=
+
(
+
)
+
history
+ + +
From b03826e3d6f081b6995b95d67d5d0b401c387519 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Mon, 25 Dec 2023 11:48:42 +0000 Subject: [PATCH 2/9] feat(JS): create sliding-part container --- index.css | 21 ++++++++++++++++++++- index.html | 9 +++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 8216806..8761bba 100644 --- a/index.css +++ b/index.css @@ -23,13 +23,31 @@ body { border-radius: 15px; overflow: hidden; display: grid; + /* grid-template-columns: repeat(4, 1fr); */ + /* column-gap: 10px; */ + row-gap: 10px; + padding: 10px; + padding-top: 0; + background-color: rgb(27 22 22 / 39%); + justify-content: center; + +} + +.sliding-part { + height: 550px; + width: 400px; + border: black 1px solid; + border-radius: 15px; + overflow: hidden; + display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 10px; row-gap: 10px; padding: 10px; background-color: rgb(27 22 22 / 39%); -} + +} .history, .child { border: 1px black solid; @@ -40,6 +58,7 @@ body { } .screen { + height: 50px; grid-column-start: 1; grid-column-end: 5; border-radius: 15px; diff --git a/index.html b/index.html index 7b8c8a2..9aece4b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
0
- +
AC
+/-
%
@@ -30,9 +30,14 @@
DE
.
=
+
history
(
)
-
history
+ + +
+ + From f31ca44d81d3bdf424b801fc7a730f91ea6c9663 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Mon, 25 Dec 2023 12:01:31 +0000 Subject: [PATCH 3/9] feat(CSS): create .sliding-part.slide CSS rule --- index.css | 9 +++++++-- index.html | 2 +- index.js | 11 +++++++++++ 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 8761bba..13b190a 100644 --- a/index.css +++ b/index.css @@ -46,9 +46,8 @@ body { padding: 10px; background-color: rgb(27 22 22 / 39%); - } -.history, +.history-btn, .child { border: 1px black solid; display: grid; @@ -57,6 +56,12 @@ body { border-radius: 15px; } +.sliding-part.slide { + transform: translateX(-200px); + transition: transform 2s; + +} + .screen { height: 50px; grid-column-start: 1; diff --git a/index.html b/index.html index 9aece4b..8de61c4 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@
DE
.
=
-
history
+
history
(
)
diff --git a/index.js b/index.js index 0738fdc..6c42f2b 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,22 @@ const btns = document.querySelectorAll("[data-value]"); let screen = document.querySelector("[data-screen]"); +const historyBtn = document.querySelector(".history-btn"); const operators = document.querySelectorAll("[data-operator]"); const operatorRegex = /[\/*\-+]/; const ZERO = 0; const ZERO_DOT = '0.'; const history = []; +console.log(historyBtn) + + +historyBtn.addEventListener("click", () => { + console.log("history btn") +}) + + + + let data = []; btns.forEach((btn) => { From ac997c6b9e557a09dbc2ebba70365cde7cd45b6b Mon Sep 17 00:00:00 2001 From: josueJURE Date: Mon, 25 Dec 2023 12:12:01 +0000 Subject: [PATCH 4/9] feat(JS): add eventListener() to slidingPart element --- index.css | 6 +++++- index.js | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index 13b190a..957dd07 100644 --- a/index.css +++ b/index.css @@ -45,6 +45,9 @@ body { row-gap: 10px; padding: 10px; background-color: rgb(27 22 22 / 39%); + transform: translateX(0px); + transition: transform 2s; + } .history-btn, @@ -57,9 +60,10 @@ body { } .sliding-part.slide { - transform: translateX(-200px); + transform: translateX(200px); transition: transform 2s; + } .screen { diff --git a/index.js b/index.js index 6c42f2b..1ad21bb 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,19 @@ const btns = document.querySelectorAll("[data-value]"); let screen = document.querySelector("[data-screen]"); const historyBtn = document.querySelector(".history-btn"); +const slidingPart = document.querySelector(".sliding-part"); const operators = document.querySelectorAll("[data-operator]"); + const operatorRegex = /[\/*\-+]/; const ZERO = 0; const ZERO_DOT = '0.'; const history = []; -console.log(historyBtn) +console.log(slidingPart) historyBtn.addEventListener("click", () => { + slidingPart.classList.toggle("slide") console.log("history btn") }) From 3b063e67bedd261ed61aa5bc47d94a2c5167775d Mon Sep 17 00:00:00 2001 From: josueJURE Date: Tue, 26 Dec 2023 09:51:14 +0000 Subject: [PATCH 5/9] feat(CSS): delete commented out declarations --- index.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.css b/index.css index 957dd07..9dc19d0 100644 --- a/index.css +++ b/index.css @@ -23,8 +23,6 @@ body { border-radius: 15px; overflow: hidden; display: grid; - /* grid-template-columns: repeat(4, 1fr); */ - /* column-gap: 10px; */ row-gap: 10px; padding: 10px; padding-top: 0; From 50c8aad168c42ec5066f7e8a0f704522b32be6d9 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Tue, 26 Dec 2023 09:52:21 +0000 Subject: [PATCH 6/9] feat(CSS): delete following declarations: row-gap: 10px --- index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/index.css b/index.css index 9dc19d0..b1931de 100644 --- a/index.css +++ b/index.css @@ -23,7 +23,6 @@ body { border-radius: 15px; overflow: hidden; display: grid; - row-gap: 10px; padding: 10px; padding-top: 0; background-color: rgb(27 22 22 / 39%); From da4df50b09093c6401c9609a31e6016ffba2773c Mon Sep 17 00:00:00 2001 From: josueJURE Date: Tue, 26 Dec 2023 09:54:10 +0000 Subject: [PATCH 7/9] feat(CSS): delete following declarations: padding-top: 0 --- index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/index.css b/index.css index b1931de..10de8b4 100644 --- a/index.css +++ b/index.css @@ -24,7 +24,6 @@ body { overflow: hidden; display: grid; padding: 10px; - padding-top: 0; background-color: rgb(27 22 22 / 39%); justify-content: center; From 5050687c68a9810278a54be8885497941b5bb622 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Tue, 26 Dec 2023 09:55:40 +0000 Subject: [PATCH 8/9] feat(CSS): delete following declarations: padding: 10px --- index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/index.css b/index.css index 10de8b4..03b821e 100644 --- a/index.css +++ b/index.css @@ -23,7 +23,6 @@ body { border-radius: 15px; overflow: hidden; display: grid; - padding: 10px; background-color: rgb(27 22 22 / 39%); justify-content: center; From 08c3ddd088abadced31128e178713419ff9d87e4 Mon Sep 17 00:00:00 2001 From: josueJURE Date: Tue, 26 Dec 2023 10:05:30 +0000 Subject: [PATCH 9/9] feat(CSS): change .sliding-part and .screen height --- index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index 03b821e..94d5862 100644 --- a/index.css +++ b/index.css @@ -29,7 +29,7 @@ body { } .sliding-part { - height: 550px; + height: 530px; width: 400px; border: black 1px solid; border-radius: 15px; @@ -62,7 +62,7 @@ body { } .screen { - height: 50px; + height: 70px; grid-column-start: 1; grid-column-end: 5; border-radius: 15px;