feat(JS): add if statement to toggle button display

Author: josueJURE

index.css

@@ -46,7 +46,10 @@ body {
 
 .computation-history-parent {
   visibility: hidden;
+}
 
+.computation-history-parent.visility {
+  visibility: visible;
 }
 
 .computation-history {
@@ -58,15 +61,19 @@ body {
   padding-top: 10px;
 }
 
-.computation-history-parent.visility {
-  visibility: visible;
-}
+
 
 .clear-history-btn {
   width: 100px;
   margin-left: 10px;
   border-radius: 15px;
-  
+  display: none;
+
+}
+
+.clear-history-btn.display {
+  display: block;
+ 
 }
 
 

index.js

@@ -23,7 +23,7 @@ console.log(slidingPart)
 
 historyBtn.addEventListener("click", () => {
   slidingPart.classList.toggle("slide")
-  computationHistoryParent.classList.toggle("visility")
+  computationHistoryParent.classList.toggle("visility");
 })
 
 
@@ -227,6 +227,9 @@ function userClicksOnEqualButton(button) {
         data.push(result);
 
         createHistoryList(historyEntries, historyElement, history)
+        
+        // debugger
+    
 
 
 
@@ -277,6 +280,11 @@ function createHistoryList(array, element, history) {
     if(element.childElementCount > HISTORY_LIMIT) {
       element.firstElementChild.remove();
     }
+    if(element.childElementCount > 0) {
+      clearHistoryBtn.classList.toggle("display");
+      console.log(historyElement.childElementCount)
+    }
+
   });
 }