PR #26: Rock-Paper-Scissor (Added Reset Score Feature)

Reset score feature
Merge pull request #26 from HeemahMuslad/Reset-Score-Feature

Author: iamwatchdogs

Rock-Paper-Scissors-Game/app.js

@@ -2,6 +2,10 @@ const computerChoiceDisplay = document.getElementById("computer-choice");
 const userChoiceDisplay = document.getElementById("user-choice");
 const resultDisplay = document.getElementById("winner");
 const possibleChoices = document.querySelectorAll(".button-container > img");
+const resetScoreElement = document.querySelector(".js-resetScore-button");
+resetScoreElement.addEventListener("click", () => {
+  resetScore();
+});
 
 let userChoice;
 let computerChoice;
@@ -60,3 +64,17 @@ function scoreElement() {
     ".js-score"
   ).innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}.`;
 }
+function resetScore() {
+  const message = document.querySelector(".js-confirmation-message");
+  message.innerHTML =
+    "Are you sure you want to reset the score?  <button class='js-yes-button message-button'>Yes</button> <button class='js-no-button message-button'>No</button>";
+  document.querySelector(".js-yes-button").addEventListener("click", () => {
+    (score.wins = 0), (score.losses = 0), (score.ties = 0);
+    localStorage.removeItem("score");
+    scoreElement();
+    message.innerHTML = "";
+  });
+  document.querySelector(".js-no-button").addEventListener("click", () => {
+    message.innerHTML = "";
+  });
+}

Rock-Paper-Scissors-Game/index.html

@@ -30,6 +30,8 @@ <h2>
       <img id="Scissors" src="./public/scissors.png" alt="Scissors" />
     </div>
     <p class="js-score score"></p>
+    <button class="js-resetScore-button resetScore">Reset Score</button>
+    <p class="js-confirmation-message message-button"></p>
 
     <div class="winner-container">
       <h2>Winner:</h2>

Rock-Paper-Scissors-Game/style.css

@@ -1,8 +1,8 @@
 body {
-  background-color: #eec6c6; 
-  font-family: 'Arial', sans-serif;
+  background-color: #eec6c6;
+  font-family: "Arial", sans-serif;
   text-align: center;
-  background-image: linear-gradient(to bottom, #f9b4c2, #ffdb86); 
+  background-image: linear-gradient(to bottom, #f9b4c2, #ffdb86);
   color: #ffffff;
   position: relative;
   min-height: 91.5vh;
@@ -13,25 +13,29 @@ body {
 }
 
 body::before {
-  content: '';
+  content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: radial-gradient(ellipse at center, rgba(246, 231, 231, 0.813) 0%, rgba(0,0,0,0.9) 100%);
+  background-image: radial-gradient(
+    ellipse at center,
+    rgba(246, 231, 231, 0.813) 0%,
+    rgba(0, 0, 0, 0.9) 100%
+  );
   z-index: -1;
 }
 
-
 h1 {
   font-size: 36px;
   font-weight: bold;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   margin-bottom: 20px;
 }
 
-h2 {
+h2,
+.score {
   color: #ffffff;
   font-size: 24px;
   font-weight: bold;
@@ -55,7 +59,10 @@ button {
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
-
+.resetScore {
+  width: 15%;
+  margin: 0 auto;
+}
 button:hover {
   background-color: #45a049;
 }
@@ -74,7 +81,6 @@ button:hover {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
-  
 }
 
 .button-container > button {
@@ -144,15 +150,13 @@ nav {
   font-size: 18px;
 }
 
-
-.button-container>img{
+.button-container > img {
   width: 10%;
   margin: 0 10px;
   cursor: pointer;
-
 }
 
-.logo{
+.logo {
   width: 20%;
 }
 
@@ -166,10 +170,12 @@ footer {
   width: 98.7%;
 }
 
-#Rock , #Paper, #Scissors{
+#Rock,
+#Paper,
+#Scissors {
   margin: 5%;
-} 
+}
 
-#winner{
+#winner {
   width: 5px;
-}
+}