Merge pull request #5 from Chirayu31/main

feat: view previous results using local storage
astush1001 · Oct 1, 2023 · d069d14 · d069d14
2 parents 11e0bc8 + 5826973
commit d069d14
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,11 +10,12 @@
     <link href="style.css" rel="stylesheet" type="text/css" />
     <link href="utils.css" rel="stylesheet" type="text/css" />
 </head>
+
 <body>
     <h1 class="text-center">Welcome to Calculate me!</h1>
     <div class="container flex flex-col mx-auto items-center">
         <div class="row">
-            <input type="text" class="input" >
+            <input type="text" class="input">
         </div>
 
         <div class="row">
@@ -55,11 +57,14 @@ <h1 class="text-center">Welcome to Calculate me!</h1>
             <button class="button">=</button>
 
         </div>
-    </div>
-
 
-
+        <div class="history">
+            <h2>Calculation History</h2>
+            <ul id="history-list"></ul>
+        </div>
+    </div>
 
     <script src="script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -1,27 +1,50 @@
-let string="";
-let buttons=document.querySelectorAll('.button');
-Array.from(buttons).forEach((button)=>{
-    button.addEventListener('click',(e)=>{
-        if(e.target.innerHTML=='='){
-            string=eval(string);
-            document.querySelector('input').value=string;
-        }
-        else if(e.target.innerHTML=='C'){
-            string="";
-            document.querySelector('input').value=string;
-        }
+let calculationString = "";
+let calculationHistory = []; // To store the calculation history
 
-        else if(e.target.innerHTML=='Bksp'){
-            string=string.slice(0,string.length-1);
-            document.querySelector('input').value=string;
-        }
+// Function to update the input field and store history
+function updateInputAndHistory() {
+    document.querySelector('input').value = calculationString;
+    localStorage.setItem('calculationHistory', JSON.stringify(calculationHistory));
+    updateHistoryList(); // Update the history list
+}
 
+// Load calculation history from local storage if it exists
+const savedCalculationHistory = localStorage.getItem('calculationHistory');
+if (savedCalculationHistory) {
+    calculationHistory = JSON.parse(savedCalculationHistory);
+    updateHistoryList(); // Update the history list when the page loads
+}
+function updateHistoryList() {
+    const historyList = document.getElementById('history-list');
+    historyList.innerHTML = ""; // Clear the existing list
 
-        else{
-         console.log(e.target);
-         string+=e.target.innerHTML;
-         document.querySelector('input').value=string;
-        }
+    calculationHistory.forEach((calculation) => {
+        const listItem = document.createElement('li');
+        listItem.textContent = calculation;
+        historyList.appendChild(listItem);
+    });
+}
 
-    })
-})
+let buttons = document.querySelectorAll('.button');
+Array.from(buttons).forEach((button) => {
+    button.addEventListener('click', (e) => {
+        if (e.target.innerHTML == '=') {
+
+            let result = eval(calculationString);
+
+            calculationHistory.push(`${calculationString} = ${result}`);
+            calculationString = result.toString();
+
+            updateInputAndHistory();
+        } else if (e.target.innerHTML == 'C') {
+            calculationString = "";
+            updateInputAndHistory();
+        } else if (e.target.innerHTML == 'Bksp') {
+            calculationString = calculationString.slice(0, calculationString.length - 1);
+            updateInputAndHistory();
+        } else {
+            calculationString += e.target.innerHTML;
+            updateInputAndHistory();
+        }
+    });
+});