added calculation history

Saurabh Maurya · Saurabh Maurya · commit a841cfa8f039 · 2023-01-28T22:48:37.000+05:30
diff --git a/calc.js b/calc.js
@@ -6,6 +6,8 @@ document.getElementById("answer").readOnly = true; //set this attribute in Html
 let screen = document.getElementById("answer");
 buttons = document.querySelectorAll("button");
 let screenValue = "";
+let maxItems = 6;
+
 for (item of buttons) {
     item.addEventListener("click", (e) => {
         buttonText = e.target.innerText;
@@ -98,5 +100,11 @@ function checkForBracketMulti() {
         return;
     } else {
         screen.value = eval(screenValue);
+        let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || [];
+        if(calcHistory.length >= maxItems){
+            calcHistory.shift();
+        }
+        calcHistory.push({screenValue, result : screen.value});
+        localStorage.setItem("calcHistory", JSON.stringify(calcHistory));
     }
 }
diff --git a/hist.js b/hist.js
@@ -0,0 +1,42 @@
+let historybutton = document.getElementById('historybutton');
+let history = document.getElementById('history');
+let bar1 = document.getElementById('bar1');
+let bar2 = document.getElementById('bar2');
+
+function showHistory() {
+    let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || [];
+    let len = calcHistory.length;
+
+    history.innerHTML = '';
+
+    bar1.style.display = 'block';
+    bar2.style.display = 'block';
+    if (len === 0) {
+        let historyItem = document.createElement('div');
+        historyItem.innerHTML = "There's no history yet.";
+        historyItem.className = 'historyelement his';
+        historyItem.style.fontSize = '30px';
+        history.appendChild(historyItem);
+    } else {
+        for (let index = 0; index < len; index++) {
+            const element = calcHistory[index];
+            let historyItem = document.createElement('div');
+            historyItem.className = 'historyelement';
+            historyItem.innerHTML = `${element.screenValue} =  ${element.result}`;
+            history.appendChild(historyItem);
+            if (index < len - 1) history.appendChild(document.createElement('hr'));
+        }
+    }
+    history.style.display = 'block';
+}
+
+historybutton.addEventListener('click', showHistory);
+
+function hide(){
+    history.style.display = 'none';
+    bar1.style.display = 'none';
+    bar2.style.display = 'none';
+}
+
+bar1.addEventListener('click', hide);
+bar2.addEventListener('click', hide);
diff --git a/history.png b/history.png
diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
 
 <body>
 	<div class="container">
-		<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href="" onclick="location.reload();">CALCULATOR</a></h1 >
+		<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href="" onclick="location.reload();">CALCULATOR</a><img id="historybutton" src="history.png"></h1 >
 		<div class="calculator">
 			<input type="text" name="screen" id="answer" readonly>
 			<table>
@@ -103,9 +103,14 @@ <h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href
                 target="_blank" href="https://harsh98trivedi.github.io">Harsh Trivedi</a></div>
 		</div>
 	</div>
+	<div id="bar1" class = "bars"></div>
+	<div id="bar2" class = "bars"></div>
+	<div id="history">
+	</div>
     <div id="turn">
     PLEASE TURN YOUR DEVICE
 	</div>
 </body>
+<script src="hist.js"></script>
 <script src="calc.js"></script>
 </html>
diff --git a/style.css b/style.css
@@ -112,6 +112,50 @@ a:hover{
     position: fixed;
 }
 
+#historybutton{
+    width:40px;
+    height:40px;
+    border-radius: 20px;
+    float:right; 
+    margin-right:15px;
+    cursor: pointer;
+}
+
+#history{
+    position: absolute;
+    width:90%;
+    height: 80vh;
+    top:10vh;
+    background-color: white;
+    border: 2px solid black;
+    border-radius: 10px;
+    display: none;
+    /* overflow-y: scroll; */
+}
+
+.historyelement{
+    color: black;
+    margin: 20px;
+    font-size: 40px;
+}
+
+#bar1, #bar2{
+    position: absolute;
+    width:30px;
+    height: 4px;
+    background-color: white;
+    margin-top: 20px;
+    margin-right: 20px;
+    margin-left: 93%;
+    transform: rotate(45deg);
+    cursor: pointer;
+    display: none;
+}
+
+#bar2{
+    transform: rotate(135deg);
+}
+
 @media (orientation: landscape) and (max-height: 500px) {
     #turn {
         width: 100vw;
