PR #25: Rock-Paper-Scissor (Added Scorce Feature)

Display score feature Merge pull request #25 from HeemahMuslad/Display-Score-Feature
Grow-with-Open-Source · Nov 1, 2023 · 8501d0b · 8501d0b
2 parents 49ed048 + c8274a6
commit 8501d0b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 29 deletions.
diff --git a/Rock-Paper-Scissors-Game/app.js b/Rock-Paper-Scissors-Game/app.js
@@ -1,18 +1,25 @@
-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 computerChoiceDisplay = document.getElementById("computer-choice");
+const userChoiceDisplay = document.getElementById("user-choice");
+const resultDisplay = document.getElementById("winner");
+const possibleChoices = document.querySelectorAll(".button-container > img");
 
 let userChoice;
 let computerChoice;
 let result;
+let score = {
+  wins: 0,
+  losses: 0,
+  ties: 0,
+};
 
-possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
-  userChoice = e.target.alt;
-  userChoiceDisplay.src = e.target.src;
-  generateComputerChoice();
-  getResult();
-}));
+possibleChoices.forEach((possibleChoice) =>
+  possibleChoice.addEventListener("click", (e) => {
+    userChoice = e.target.alt;
+    userChoiceDisplay.src = e.target.src;
+    generateComputerChoice();
+    getResult();
+  })
+);
 
 function generateComputerChoice() {
   const randomNumber = Math.floor(Math.random() * possibleChoices.length);
@@ -27,17 +34,29 @@ function getResult() {
     resultDisplay.innerHTML = result;
     resultDisplay.className = "it-s-a-draw";
   } else if (
-    (computerChoice === 'Rock' && userChoice === 'Paper') ||
-    (computerChoice === 'Scissors' && userChoice === 'Rock') ||
-    (computerChoice === 'Paper' && userChoice === 'Scissors')
+    (computerChoice === "Rock" && userChoice === "Paper") ||
+    (computerChoice === "Scissors" && userChoice === "Rock") ||
+    (computerChoice === "Paper" && userChoice === "Scissors")
   ) {
-    result = 'You win!';
-    resultDisplay.innerHTML = `<img src="./public/gamer.png" alt="Gamer" style="width: 10%;">`; 
-    resultDisplay.className = "you-win"; 
+    result = "You win!";
+    resultDisplay.innerHTML = `<img src="./public/gamer.png" alt="Gamer" style="width: 10%;">`;
+    resultDisplay.className = "you-win";
   } else {
-    result = 'You lose!';
-    resultDisplay.innerHTML = `<img src="./public/computer.png" alt="Computer" style="width: 10%;">`; 
-    resultDisplay.className = "you-lose"; 
+    result = "You lose!";
+    resultDisplay.innerHTML = `<img src="./public/computer.png" alt="Computer" style="width: 10%;">`;
+    resultDisplay.className = "you-lose";
   }
+  if (result === "You win!") {
+    score.wins += 1;
+  } else if (result === "You lose!") {
+    score.losses += 1;
+  } else if (result === "It's a draw") {
+    score.ties += 1;
+  }
+  scoreElement();
+}
+function scoreElement() {
+  document.querySelector(
+    ".js-score"
+  ).innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}.`;
 }
-
diff --git a/Rock-Paper-Scissors-Game/index.html b/Rock-Paper-Scissors-Game/index.html
@@ -1,28 +1,35 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Rock Paper Scissors Tutorial</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <nav>ROCK PAPER SCISSORS GAME</nav>
     <div class="choice-container">
       <div>
-        <h2> <img src="./public/computer.png" alt="" class="logo"> <br> Computer Choice</h2>
-        <img id="computer-choice" src="" >
+        <h2>
+          <img src="./public/computer.png" alt="" class="logo" /> <br />
+          Computer Choice
+        </h2>
+        <img id="computer-choice" src="" />
       </div>
       <div>
-        <h2> <img src="./public/gamer.png" alt="" class="logo"> <br> User Choice</h2>
-        <img id="user-choice" src="" >
+        <h2>
+          <img src="./public/gamer.png" alt="" class="logo" /> <br />
+          User Choice
+        </h2>
+        <img id="user-choice" src="" />
       </div>
     </div>
 
     <div class="button-container">
-      <img id="Rock" src="./public/rock.png" alt="Rock"><br>
-      <img id="Paper" src="./public/paper.png" alt="Paper">
-      <img id="Scissors" src="./public/scissors.png" alt="Scissors">
+      <img id="Rock" src="./public/rock.png" alt="Rock" /><br />
+      <img id="Paper" src="./public/paper.png" alt="Paper" />
+      <img id="Scissors" src="./public/scissors.png" alt="Scissors" />
     </div>
+    <p class="js-score score"></p>
 
     <div class="winner-container">
       <h2>Winner:</h2>