Merge pull request #30 from josueJURE/local-storage

Local storage

Author: josueJURE

index.js

@@ -12,6 +12,15 @@ clearHistoryBtn.addEventListener("click", () => {historyElement.innerHTML = "";
 
 document.addEventListener('keydown', handleKeyPress);
 
+
+// Add this at the beginning of your script
+window.addEventListener("DOMContentLoaded", () => {
+  const history = getHistoryFromLocalStorage();
+    createHistoryList(history, historyElement);
+
+});
+
+
 function handleKeyPress(event) {
 
   const key = event.key;
@@ -222,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`;
     }
   }
@@ -266,21 +278,50 @@ function displayResult(array, outcome) {
   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();
-    }
+// function createHistoryList(array, element) {
+
+//   array.forEach((entry) => {
+//     history.push(entry);
+//     element.innerHTML += `<li> ${entry.join(" ")}</li>`;
+//     if (element.childElementCount > HISTORY_LIMIT) {
+//       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.slice(-10)));
+}
+
+
+
+
+
 clearHistoryBtn.addEventListener("click", () => {
   historyElement.innerHTML = "";
+  clearHistoryInLocalStorage();
   togglesClearHistoryButton(historyElement, clearHistoryBtn);
 });
 
+function clearHistoryInLocalStorage() {
+  localStorage.removeItem("calculatorHistory");
+}
+
 function togglesClearHistoryButton(element, btn) {
+  const history = getHistoryFromLocalStorage();
   btn.classList.toggle("display", element.childElementCount > 0);
 }
 // functions creations ends