feat(JS): toggle visibility on computationHistoryParent element

Author: josueJURE

index.css

@@ -44,17 +44,21 @@ body {
   transition: transform 2s;
 }
 
+.computation-history-parent {
+  visibility: hidden;
+
+}
+
 .computation-history {
   height: 490px;
   width: 400px;
   display: flex;
   flex-direction: column;
-  visibility: hidden;
   margin-left: 10px;
   padding-top: 10px;
 }
 
-.computation-history.visility {
+.computation-history-parent.visility {
   visibility: visible;
 }
 

index.html

@@ -35,7 +35,7 @@
             <div data-value=")" data-operator  class="child operator">)</div>
         </div>
 
-        <div>
+        <div class="computation-history-parent">
             <ul class="computation-history"></ul>
             <button class="clear-history-btn">clear history</button>
 

index.js

@@ -3,10 +3,14 @@ const historyElement = document.querySelector(".computation-history");
 let screen = document.querySelector("[data-screen]");
 const historyBtn = document.querySelector(".history-btn");
 const slidingPart = document.querySelector(".sliding-part");
+const computationHistoryParent = document.querySelector(".computation-history-parent")
 const operators = document.querySelectorAll("[data-operator]");
 const clearHistoryBtn = document.querySelector(".clear-history-btn");
 
 
+console.log(computationHistoryParent);
+
+
 
 const operatorRegex = /[\/*\-+]/;
 const ZERO = 0;
@@ -19,7 +23,7 @@ console.log(slidingPart)
 
 historyBtn.addEventListener("click", () => {
   slidingPart.classList.toggle("slide")
-  historyElement.classList.toggle("visility")
+  computationHistoryParent.classList.toggle("visility")
 })