Scores calculation feature

README.md

@@ -19,7 +19,8 @@
 
 </div>
 
-Welcome to **Javascript-Projects**, one of the best ways to introduce the world of open-source contribution! Whether you're a beginner looking to take your first steps or an intermediate developer seeking to refine your skills, this repository is designed to make your journey into open-source development. This repo will provide with best hands-on understanding of open source contributions.
+Welcome to **Javascript-Projects**, one of the best ways to introduce the world of open-source contribution! Whether you're a beginner looking to take your first steps or an intermediate developer seeking to refine your skills, this repository is designed to make your journey into open-source development. This repo will provide you with the best hands-on understanding of open source contributions.
+
 
 Our mission is to empower newcomers, providing them with a welcoming environment to learn and grow in the open-source community** offers a curated collection of JavaScript-based projects that are both fun to work on and highly educational. Through hands-on experience and guidance from our dedicated team of maintainers, you'll gain the skills and confidence to contribute to larger projects with ease. We can't wait to see what you'll bring to the open-source table – so dive in, explore, and start your open-source adventure today!
 
@@ -29,12 +30,12 @@ All your work details, including the path to your work, will be displayed on the
 
 ## Contribution
 
-Hey there, fellow developer !!!... I'm happy to see you are interested in contributing to this repo. As this is an open-source repo containing a collection of javascript-based projects, you're always welcome to showcase your learning & implementation efforts. Since the projects are built using JavaScript, you can design static web pages *(i.e., simple HTML pages with or without CSS)* to showcase your project functionality that is hosted using GitHub Pages. As your work is being hosted live, we expect you to make some quality contributions so that others can learn and appreciate your work.
+Hey there, fellow developer !!!... I'm happy to see that you are interested in contributing to this repo. As this is an open-source repo containing a collection of javascript-based projects, you're always welcome to showcase your learning & implementation efforts. Since the projects are built using JavaScript, you can design static web pages *(i.e., simple HTML pages with or without CSS)* to showcase your project functionality that is hosted using GitHub Pages. As your work is being hosted live, we expect you to make some quality contributions so that others can learn and appreciate your work.
 
 > [!IMPORTANT]
 > Make sure to check the [CONTRIBUTING.md](https://github.com/Grow-with-Open-Source/Javascript-Projects/blob/main/CONTRIBUTING.md "goto CONTRIBUTING.md") to understand the rules, file structure and step-by-step guide for contribution.
 
-- **Step 1:** Make sure you have required tools within you local machine *(like *git, vs code, node.js and so on)*.
+- **Step 1:** Make sure you have the required tools within you local machine *(like *git, vs code, node.js and so on)*.
 - **Step 2:** Now start by [forking](https://github.com/Grow-with-Open-Source/Javascript-Projects/fork "let's fork the repo") the repository.
 - **Step 3:** Clone the forked repository to your local machine.
   ```bash

Rock-Paper-Scissors-Game/app.js

@@ -1,18 +1,29 @@
-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");
+const resetScoreElement = document.querySelector(".js-resetScore-button");
+resetScoreElement.addEventListener("click", () => {
+  resetScore();
+});
 
 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 +38,43 @@ 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}.`;
+}
+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

@@ -1,29 +1,39 @@
 <!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>
+    <button class="js-resetScore-button resetScore">Reset Score</button>
+    <p class="js-confirmation-message message-button"></p>
+
     <div class="winner-container">
       <h2>Winner:</h2>
       <span id="winner" class="result-text"></span>

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,6 +59,10 @@ button {
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
+.resetScore {
+  width: 15%;
+  margin: 0 auto;
+}
 
 button:hover {
   background-color: #45a049;
@@ -74,7 +82,6 @@ button:hover {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
-
 }
 
 .button-container > button {
@@ -144,15 +151,13 @@ nav {
   font-size: 18px;
 }
 
-
-.button-container>img{
+.button-container > img {
   width: 10%;
   margin: 0 10px;
   cursor: pointer;
-
 }
 
-.logo{
+.logo {
   width: 20%;
 }
 
@@ -166,10 +171,12 @@ footer {
   width: 98.7%;
 }
 
-#Rock , #Paper, #Scissors{
+#Rock,
+#Paper,
+#Scissors {
   margin: 5%;
-} 
+}
 
-#winner{
+#winner {
   width: 5px;
-}
+}