Merge pull request #17 from josueJURE/display-history-using-HTML

Display history using html

Author: josueJURE

index.css

@@ -5,6 +5,7 @@
   outline: none;
   font-family: "Open Sans", sans-serif;
   background-color: aliceblue;
+  list-style: none;
 }
 
 body {
@@ -17,18 +18,17 @@ body {
 }
 
 .parent {
+  position: relative;
   height: 600px;
   width: 400px;
   border: black 1px solid;
   border-radius: 15px;
   overflow: hidden;
-  display: grid;
-  background-color: rgb(27 22 22 / 39%);
-  justify-content: center;
-
+ 
 }
 
 .sliding-part {
+  position: absolute;
   height: 530px;
   width: 400px;
   border: black 1px solid;
@@ -41,10 +41,48 @@ body {
   padding: 10px;
   background-color: rgb(27 22 22 / 39%);
   transform: translateX(0px);
-  transition: transform 2s;
-  
-  
+  transition: transform 1s;
+}
+
+.computation-history-parent {
+  visibility: hidden;
 }
+
+.computation-history-parent.visility {
+  visibility: visible;
+}
+
+.computation-history {
+  height: 490px;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px;
+  row-gap: 10px;
+}
+
+.computation-history-parent > * {
+  margin-left: 10px;
+}
+
+
+
+.clear-history-btn {
+  width: 100px;
+  margin-top: -10px;
+
+  border-radius: 15px;
+  display: none;
+
+}
+
+.clear-history-btn.display {
+  display: block;
+ 
+}
+
+  
+
 .history-btn,
 .child {
   border: 1px black solid;
@@ -56,7 +94,7 @@ body {
 
 .sliding-part.slide {
   transform: translateX(200px);
-  transition: transform 2s;
+  transition: transform 1s;
 
 
 }
@@ -88,3 +126,5 @@ body {
   grid-column-end: 2;
 }
 
+
+

index.html

@@ -33,9 +33,15 @@
             <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 class="computation-history-parent">
+            <h3>history</h3>
+            <ul class="computation-history"></ul>
+            <button class="clear-history-btn">clear history</button>
 
         </div>
+   
 
 
 

index.js

@@ -1,24 +1,25 @@
 const btns = document.querySelectorAll("[data-value]");
+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");
+
+clearHistoryBtn.addEventListener("click", () => {historyElement.innerHTML = "";
+});
 
 const operatorRegex = /[\/*\-+]/;
 const ZERO = 0;
-const ZERO_DOT = '0.';
+const ZERO_DOT = "0.";
+const HISTORY_LIMIT = 10;
 const history = [];
 
-console.log(slidingPart)
-
-
 historyBtn.addEventListener("click", () => {
-  slidingPart.classList.toggle("slide")
-  console.log("history btn")
-})
-
-
-
+  slidingPart.classList.toggle("slide");
+  computationHistoryParent.classList.toggle("visility");
+});
 
 let data = [];
 
@@ -47,8 +48,6 @@ btns.forEach((btn) => {
     deteLastEntry(buttonValue);
 
     convertToPercentage(buttonValue);
-
-  
   });
 });
 // forEach ends & functions creations begins
@@ -58,6 +57,10 @@ function convertToPercentage(button) {
   }
 }
 
+clearHistoryBtn.addEventListener("click", () => {
+  historyElement.innerHTML = "";
+});
+
 function deteLastEntry(button) {
   if (button === "DE") {
     let newArray = data.slice(ZERO, -1);
@@ -73,7 +76,6 @@ function canUserAddDot(button) {
   if (button === ".") {
     var dotAllowed = true;
     for (var i = data.length - 1; i >= ZERO; i--) {
-      console.log("data > " + data[i]);
       if (data[i] === ".") {
         dotAllowed = false;
         break;
@@ -106,15 +108,13 @@ function toggleSign(button) {
     let currentExpression = data.join("");
     let reversedExpression = currentExpression.split("").join("");
     let match = reversedExpression.match(/(\d+(\.\d+)?)|(\D+)/); // Match a number or non-digit
-    // debugger
 
     if (match) {
       let start = currentExpression.length - match[ZERO].length;
       let end = currentExpression.length;
       let currentValue = Number(match[ZERO]);
 
       if (!isNaN(currentValue)) {
-        // If it's a number, toggle its sign
         currentValue = -currentValue;
         data = data
           .slice(ZERO, start)
@@ -187,24 +187,20 @@ function userClicksOnEqualButton(button) {
       const replacedArray = data.map((item) =>
         item === "x" ? "*" : item === "÷" ? "/" : item
       );
-      // Check if the expression involves 0/0
-      // if (areYouDivindingByZero(replacedArray)) {
-      //   screen.innerText = "You cannot divide by zero. Press AC";
-      // }
-
       if (areYouDividingdZeroByZero(replacedArray)) {
         screen.innerText = "0÷0 is an invalid format. Press AC";
       } else {
         let result = eval(replacedArray.join(""));
+        let historyEntries = [[...replacedArray, "=", result]]; // Used slice() at firest. But slice() is not sufficient because it only creates a shallow copy of the array, and modifications to the new array will still affect the original array. The spread syntax ([...replacedArray]), which creates a shallow copy as well, is a concise way to create a new array with the same elements as the existing array. While ensuring that modifications to historyEntries do not affect replacedArray, and vice versa.
         replacedArray.splice(replacedArray.length, 0, "=", result);
-        history.push(replacedArray.join(""))
-        console.log(history);
-
         displayResult(replacedArray, result);
-        screen.innerText = !Number.isFinite(result) ? "You cannot divide by zero. Press AC" : result;
-        // divideByZero(screen, result);
+        screen.innerText = !Number.isFinite(result)
+          ? "You cannot divide by zero. Press AC"
+          : result;
         data = [];
         data.push(result);
+        createHistoryList(historyEntries, historyElement, history);
+        togglesClearHistoryButton(historyElement, clearHistoryBtn);
       }
     } catch (e) {
       screen.innerText = `${e.name} press AC`;
@@ -238,4 +234,22 @@ function displayResult(array, outcome) {
   array = [];
   array.push(outcome);
 }
+
+function createHistoryList(array, element, history) {
+  array.forEach((entry) => {
+    history.push(entry);
+    element.innerHTML += `<li> ${entry.join(" ")}</li>`;
+    if (element.childElementCount > HISTORY_LIMIT) {
+      element.firstElementChild.remove();
+    }
+  });
+}
+clearHistoryBtn.addEventListener("click", () => {
+  historyElement.innerHTML = "";
+  togglesClearHistoryButton(historyElement, clearHistoryBtn);
+});
+
+function togglesClearHistoryButton(element, btn) {
+  btn.classList.toggle("display", element.childElementCount > 0);
+}
 // functions creations ends