Merge pull request #16 from josueJURE/make-part-of-keyboard-slides

Make part of keyboard slides
josueJURE · Dec 26, 2023 · ccb9c09 · ccb9c09
2 parents 6e9f631 + 08c3ddd
commit ccb9c09
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 23 deletions.
diff --git a/index.css b/index.css
@@ -23,13 +23,29 @@ body {
   border-radius: 15px;
   overflow: hidden;
   display: grid;
+  background-color: rgb(27 22 22 / 39%);
+  justify-content: center;
+
+}
+
+.sliding-part {
+  height: 530px;
+  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%);
+  transform: translateX(0px);
+  transition: transform 2s;
+
+
 }
-
+.history-btn,
 .child {
   border: 1px black solid;
   display: grid;
@@ -38,7 +54,15 @@ body {
   border-radius: 15px;
 }
 
+.sliding-part.slide {
+  transform: translateX(200px);
+  transition: transform 2s;
+
+
+}
+
 .screen {
+  height: 70px;
   grid-column-start: 1;
   grid-column-end: 5;
   border-radius: 15px;

diff --git a/index.html b/index.html
@@ -9,28 +9,38 @@
 <body>
     <div class="parent">
         <div data-screen class="screen">0</div>
-        <div data-value="AC" class="child symbol">AC</div>
-        <div data-value="minus" class="child symbol">+/-</div>
-        <div data-value="%" data-operator class="child symbol">%</div>
-        <div data-value="/" data-number class="child operator">÷</div>
-        <div data-value="7" class="child digit">7</div>
-        <div data-value="8" data-number class="child digit">8</div>
-        <div data-value="9" class="child digit">9</div>
-        <div data-value="*" data-operator class="child operator">x</div>
-        <div data-value="4" class="child digit">4</div>
-        <div data-value="5" class="child digit">5</div>
-        <div data-value="6" class="child digit">6</div>
-        <div data-value="-" data-operator  class="child operator">-</div>
-        <div data-value="1" class="child digit">1</div>
-        <div data-value="2" class="child digit">2</div>
-        <div data-value="3" class="child digit">3</div>
-        <div data-value="+" data-operator  class="child operator">+</div>
-        <div data-value="0" class="child zero">0</div>
-        <div data-value="DE" class="child DE">DE</div>
-        <div data-value="." class="child">.</div>
-        <div data-value="=" data-operator  class="child operator">=</div>
-        <div data-value="(" data-operator  class="child operator">(</div>
-        <div data-value=")" data-operator  class="child operator">)</div>
+        <div class="sliding-part">
+            <div data-value="AC" class="child symbol">AC</div>
+            <div data-value="minus" class="child symbol">+/-</div>
+            <div data-value="%" data-operator class="child symbol">%</div>
+            <div data-value="/" data-number class="child operator">÷</div>
+            <div data-value="7" class="child digit">7</div>
+            <div data-value="8" data-number class="child digit">8</div>
+            <div data-value="9" class="child digit">9</div>
+            <div data-value="*" data-operator class="child operator">x</div>
+            <div data-value="4" class="child digit">4</div>
+            <div data-value="5" class="child digit">5</div>
+            <div data-value="6" class="child digit">6</div>
+            <div data-value="-" data-operator  class="child operator">-</div>
+            <div data-value="1" class="child digit">1</div>
+            <div data-value="2" class="child digit">2</div>
+            <div data-value="3" class="child digit">3</div>
+            <div data-value="+" data-operator  class="child operator">+</div>
+            <div data-value="0" class="child zero">0</div>
+            <div data-value="DE" class="child DE">DE</div>
+            <div data-value="." class="child">.</div>
+            <div data-value="=" data-operator  class="child operator">=</div>
+            <div data-value="history" class="history-btn">history</div>
+            <div data-value="(" data-operator  class="child operator">(</div>
+            <div data-value=")" data-operator  class="child operator">)</div>
+
+
+        </div>
+
+
+
+
+
       </div>
     </div>
     <script src="index.js"></script>

diff --git a/index.js b/index.js
@@ -1,11 +1,25 @@
 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(slidingPart)
+
+
+historyBtn.addEventListener("click", () => {
+  slidingPart.classList.toggle("slide")
+  console.log("history btn")
+})
+
+
+
+
 let data = [];
 
 btns.forEach((btn) => {