feat(CSS): create .sliding-part.slide CSS rule

Author: josueJURE

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;

index.html

@@ -30,7 +30,7 @@
             <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">history</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>
 

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) => {