added highScore feature

- saves the highScore in local storage to rerender it once refreshed - used localStorage for storage
uday03meh · Oct 13, 2022 · 7b39b78 · 7b39b78
1 parent a364c6c
commit 7b39b78
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -10,22 +10,25 @@
 
 <body>
   <div class="wrapper">
-  <div class="buttons">
-    <button class="rpsButton" value="Rock" onclick="getResult()">✊</button>
-    <button class="rpsButton" value="Paper" onclick="getResult()">🤚</button>
-    <button class="rpsButton" value="Scissors" onclick="getResult()">✌</button>
-  </div>
-  <div class="resultContainer">
+    <div class="buttons">
+      <button class="rpsButton" value="Rock" onclick="getResult()">✊</button>
+      <button class="rpsButton" value="Paper" onclick="getResult()">🤚</button>
+      <button class="rpsButton" value="Scissors" onclick="getResult()">✌</button>
+    </div>
+
+    <div class="resultContainer">
       <div id = "scoreContainer">
-      <div id = "yourScore">Your Score:  </div>
-  <div id="player-score">0</div>
+        <div id = "yourScore">Your Score:  </div>
+        <div id="player-score">0</div>
       </div>
-          <div id = "handsdiv">
-  <div id="hands"></div>
+      <div id = "handsdiv">
+        <div id="hands"></div>
       </div>
-  <div id="result"></div>
-  <button id='endGameButton'>Again !</button>
-  </div>
+      <div id="result"></div>
+      <button id='endGameButton'>Again !</button>
+    </div>
+
+    <div id="highScore">High score: 0</div>
   </div>
 
   <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -1,3 +1,11 @@
+let highScoreFromLocalStorage = localStorage.getItem("highScore");
+let highScoreEl=document.getElementById("highScore");
+let highScore=0;
+if (highScoreFromLocalStorage) {
+  highScore = highScoreFromLocalStorage;
+  highScoreEl.textContent="High score: " + highScore;
+}
+
 const choices = ["Rock", "Paper", "Scissors"];
 function getComputerChoice(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
@@ -52,6 +60,13 @@ function showResult(scoreBefore, scoreAfter, playerChoice, computerChoice) {
   }
 
   finalresult = document.getElementById("result").innerText;
+  if (parseInt(scoreAfter) > highScore) {
+    highScore = scoreAfter;
+    localStorage.setItem("highScore", highScore);
+    highScoreFromLocalStorage = localStorage.getItem("highScore");
+    highScoreEl.textContent="High score: " + highScoreFromLocalStorage;
+  }
+  localStorage.setItem("highScore", highScore);
   if (parseInt(scoreBefore) > parseInt(scoreAfter)) {
     document.getElementById("result").style.color = "red";
     document.getElementById("result").innerText = "You Lose!";
@@ -67,12 +82,14 @@ function showResult(scoreBefore, scoreAfter, playerChoice, computerChoice) {
 function onClickRPS(playerChoice) {
   computerChoice = getComputerChoice(choices);
   getResult(playerChoice, computerChoice);
+
   showResult(scoreBefore, scoreAfter, playerChoice, computerChoice);
 }
 
 function playGame() {
   const rpsButtons = document.querySelectorAll(".rpsButton");
-
+  highScoreFromLocalStorage = localStorage.getItem("highScore");
+  highScoreEl.textContent="High score: " + highScoreFromLocalStorage;
   rpsButtons.forEach(
     (rpsButton) =>
       (rpsButton.onclick = () => {
@@ -82,8 +99,15 @@ function playGame() {
 }
 
 function endGame() {
+  localStorage.setItem("highScore", highScore);
+  highScoreFromLocalStorage = localStorage.getItem("highScore");
+  highScoreEl.textContent="High score: " + highScoreFromLocalStorage;
   const endGameButton = document.getElementById("endGameButton");
   endGameButton.onclick = () => {
+    highScore = 0;
+    localStorage.setItem("highScore",highScore);
+    highScoreFromLocalStorage = localStorage.getItem("highScore");
+    highScoreEl.textContent="High score: " + highScoreFromLocalStorage;
     document.getElementById("player-score").innerText = 0;
     document.getElementById("result").innerText = "";
     document.getElementById("hands").innerText = "";

diff --git a/style.css b/style.css
@@ -76,7 +76,6 @@ html, body {
   width: 100px;
   font-size: 48px;
   border-radius: 30px;
-  background-color:white
   padding: auto;
   margin:auto;
   color:white