From f03e5bfd9ec6fa71724a8430c76dc8134f0b3ff8 Mon Sep 17 00:00:00 2001 From: Rohimat Mustapha Date: Tue, 31 Oct 2023 14:44:55 -0700 Subject: [PATCH 1/4] added a paragraph that the displays the score on the page --- Rock-Paper-Scissors-Game/index.html | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/Rock-Paper-Scissors-Game/index.html b/Rock-Paper-Scissors-Game/index.html index 9dc2f07..975214c 100644 --- a/Rock-Paper-Scissors-Game/index.html +++ b/Rock-Paper-Scissors-Game/index.html @@ -1,28 +1,35 @@ - + Rock Paper Scissors Tutorial - +
-


Computer Choice

- +

+
+ Computer Choice +

+
-


User Choice

- +

+
+ User Choice +

+
- Rock
- Paper - Scissors + Rock
+ Paper + Scissors
+

Winner:

From 01fcfe1ba17b5030ab7bc4d4f975ba72144d45b5 Mon Sep 17 00:00:00 2001 From: Rohimat Mustapha Date: Tue, 31 Oct 2023 14:46:41 -0700 Subject: [PATCH 2/4] a score object that takes in the scores properties --- Rock-Paper-Scissors-Game/app.js | 46 +++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/Rock-Paper-Scissors-Game/app.js b/Rock-Paper-Scissors-Game/app.js index 81b7535..349a67d 100644 --- 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,16 @@ 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 = `Gamer`; - resultDisplay.className = "you-win"; + result = "You win!"; + resultDisplay.innerHTML = `Gamer`; + resultDisplay.className = "you-win"; } else { - result = 'You lose!'; - resultDisplay.innerHTML = `Computer`; - resultDisplay.className = "you-lose"; + result = "You lose!"; + resultDisplay.innerHTML = `Computer`; + resultDisplay.className = "you-lose"; } } - From b5b9115f7612d7dabe119ed2b4eea39fd75041ba Mon Sep 17 00:00:00 2001 From: Rohimat Mustapha Date: Tue, 31 Oct 2023 14:49:25 -0700 Subject: [PATCH 3/4] added some statements to check the result so as to update the scores --- Rock-Paper-Scissors-Game/app.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Rock-Paper-Scissors-Game/app.js b/Rock-Paper-Scissors-Game/app.js index 349a67d..2319259 100644 --- a/Rock-Paper-Scissors-Game/app.js +++ b/Rock-Paper-Scissors-Game/app.js @@ -46,4 +46,11 @@ function getResult() { resultDisplay.innerHTML = `Computer`; 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; + } } From c8274a6244acda7639e5f551721679b8d6fcf93a Mon Sep 17 00:00:00 2001 From: Rohimat Mustapha Date: Tue, 31 Oct 2023 14:51:50 -0700 Subject: [PATCH 4/4] added a function to update the scores if the statement is true --- Rock-Paper-Scissors-Game/app.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Rock-Paper-Scissors-Game/app.js b/Rock-Paper-Scissors-Game/app.js index 2319259..2222b4f 100644 --- a/Rock-Paper-Scissors-Game/app.js +++ b/Rock-Paper-Scissors-Game/app.js @@ -53,4 +53,10 @@ function getResult() { } 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}.`; }