Merge pull request #3961 from meetarora10/but-branch

Refresh score button in rock paper scissor game.

Games/Rock_paper_scissor/index.html

@@ -33,6 +33,12 @@ <h1>Rock Paper Scissors</h1>
     </div>
 
 <div class="board">
+  <button class="reset" onclick="
+    userScore=0;
+    compScore=0;
+    updateScore(userScore,compScore);
+    msg.innerText='Play your move';
+    ">Reset score</button>
     <p class="p"> Wins </p>
     <div class="score-board">
       <div class="score">

Games/Rock_paper_scissor/script.js

@@ -17,19 +17,22 @@ const drawGame = () => {
   msg.innerText = "Game was Draw. Play again.";
   msg.style.backgroundColor = "#081b31";
 };
+const updateScore = (userScore,compScore)=>{
+  userScorePara.innerText = userScore;
+  compScorePara.innerText = compScore;
 
+}
 const showWinner = (userWin, userChoice, compChoice) => {
   if (userWin) {
     userScore++;
-    userScorePara.innerText = userScore;
     msg.innerText = `You win! Your ${userChoice} beats ${compChoice}`;
     msg.style.backgroundColor = "green";
   } else {
     compScore++;
-    compScorePara.innerText = compScore;
     msg.innerText = `You lost. ${compChoice} beats your ${userChoice}`;
     msg.style.backgroundColor = "red";
   }
+  updateScore(userScore,compScore);
 };
 
 const playGame = (userChoice) => {

Games/Rock_paper_scissor/styles.css

@@ -80,7 +80,7 @@
 
   #user-score,
   #comp-score {
-    font-size: 4rem;
+    font-size: 3rem;
   }
 
   .msg-container {
@@ -94,4 +94,20 @@
     display: inline;
     padding: 1rem;
     border-radius: 1rem;
+  }
+  .reset{
+    position: relative;
+    right: 25rem;
+    top: 11.7rem;
+    border: 2px solid black;
+    background: transparent;
+    border-radius: 6px;
+    height: 50px;
+    width: 85px;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+  .reset:hover{
+    background-color: black;
+    color: white;
   }