(JS): fix bug/infinnite loop with local storage

Author: josueJURE

index.js

@@ -16,9 +16,8 @@ document.addEventListener('keydown', handleKeyPress);
 // Add this at the beginning of your script
 window.addEventListener("DOMContentLoaded", () => {
   const history = getHistoryFromLocalStorage();
-  history.forEach((entry) => {
-    createHistoryList(entry, historyElement);
-  });
+    createHistoryList(history, historyElement);
+
 });
 
 
@@ -232,18 +231,21 @@ function userClicksOnEqualButton(button) {
         screen.innerText = "0÷0 is an invalid format. Press AC";
       } else {
         let result = eval(replacedArray.join(""));
-        let historyEntries = [[...replacedArray, "=", result]]; // Used slice() at first. 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.
+        const history = getHistoryFromLocalStorage()
+        history.push([...replacedArray, "=", result]); // Used slice() at first. 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);
         displayResult(replacedArray, result);
         screen.innerText = !Number.isFinite(result)
           ? "You cannot divide by zero. Press AC"
           : result;
         data = [];
         data.push(result);
-        createHistoryList(historyEntries, historyElement, history);
+        setHistoryToLocalStorage(history)
+        createHistoryList(history, historyElement);
         togglesClearHistoryButton(historyElement, clearHistoryBtn);
       }
     } catch (e) {
+      console.error(e)
       screen.innerText = `${e.name} press AC`;
     }
   }
@@ -287,24 +289,21 @@ function displayResult(array, outcome) {
 //   });
 // }
 
-function createHistoryList(array, element) {
-  const history = getHistoryFromLocalStorage();
-  history.push(array);
-  setHistoryToLocalStorage(history);
-
-  element.innerHTML += `<li> ${array.join(" ")}</li>`;
-
-  if (element.childElementCount > 10) {
-    element.firstElementChild.remove();
-  }
+function createHistoryList(entries, element) {
+  element.innerHTML = "";
+    entries.slice(-10).reverse().forEach((entry) => {
+    const listItem = document.createElement("li");
+    listItem.textContent = entry;
+  element.appendChild(listItem);
+  });
 }
 
 function getHistoryFromLocalStorage() {
   return JSON.parse(localStorage.getItem("calculatorHistory")) || [];
 }
 
 function setHistoryToLocalStorage(history) {
-  localStorage.setItem("calculatorHistory", JSON.stringify(history));
+  localStorage.setItem("calculatorHistory", JSON.stringify(history.slice(-10)));
 }