Skip to content

Commit 8501d0b

Browse files
iamwatchdogsiamwatchdogs
authored
PR #25: Rock-Paper-Scissor (Added Scorce Feature)
Display score feature Merge pull request #25 from HeemahMuslad/Display-Score-Feature
2 parents 49ed048 + c8274a6 commit 8501d0b

File tree

2 files changed

+55
-29
lines changed

2 files changed

+55
-29
lines changed

‎Rock-Paper-Scissors-Game/app.js‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
const computerChoiceDisplay = document.getElementById('computer-choice');
2-
const userChoiceDisplay = document.getElementById('user-choice');
3-
const resultDisplay = document.getElementById('winner');
4-
const possibleChoices = document.querySelectorAll('.button-container > img');
1+
const computerChoiceDisplay = document.getElementById("computer-choice");
2+
const userChoiceDisplay = document.getElementById("user-choice");
3+
const resultDisplay = document.getElementById("winner");
4+
const possibleChoices = document.querySelectorAll(".button-container > img");
55

66
let userChoice;
77
let computerChoice;
88
let result;
9+
let score = {
10+
wins: 0,
11+
losses: 0,
12+
ties: 0,
13+
};
914

10-
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
11-
userChoice = e.target.alt;
12-
userChoiceDisplay.src = e.target.src;
13-
generateComputerChoice();
14-
getResult();
15-
}));
15+
possibleChoices.forEach((possibleChoice) =>
16+
possibleChoice.addEventListener("click", (e) => {
17+
userChoice = e.target.alt;
18+
userChoiceDisplay.src = e.target.src;
19+
generateComputerChoice();
20+
getResult();
21+
})
22+
);
1623

1724
function generateComputerChoice() {
1825
const randomNumber = Math.floor(Math.random() * possibleChoices.length);
@@ -27,17 +34,29 @@ function getResult() {
2734
resultDisplay.innerHTML = result;
2835
resultDisplay.className = "it-s-a-draw";
2936
} else if (
30-
(computerChoice === 'Rock' && userChoice === 'Paper') ||
31-
(computerChoice === 'Scissors' && userChoice === 'Rock') ||
32-
(computerChoice === 'Paper' && userChoice === 'Scissors')
37+
(computerChoice === "Rock" && userChoice === "Paper") ||
38+
(computerChoice === "Scissors" && userChoice === "Rock") ||
39+
(computerChoice === "Paper" && userChoice === "Scissors")
3340
) {
34-
result = 'You win!';
35-
resultDisplay.innerHTML = `<img src="./public/gamer.png" alt="Gamer" style="width: 10%;">`;
36-
resultDisplay.className = "you-win";
41+
result = "You win!";
42+
resultDisplay.innerHTML = `<img src="./public/gamer.png" alt="Gamer" style="width: 10%;">`;
43+
resultDisplay.className = "you-win";
3744
} else {
38-
result = 'You lose!';
39-
resultDisplay.innerHTML = `<img src="./public/computer.png" alt="Computer" style="width: 10%;">`;
40-
resultDisplay.className = "you-lose";
45+
result = "You lose!";
46+
resultDisplay.innerHTML = `<img src="./public/computer.png" alt="Computer" style="width: 10%;">`;
47+
resultDisplay.className = "you-lose";
4148
}
49+
if (result === "You win!") {
50+
score.wins += 1;
51+
} else if (result === "You lose!") {
52+
score.losses += 1;
53+
} else if (result === "It's a draw") {
54+
score.ties += 1;
55+
}
56+
scoreElement();
57+
}
58+
function scoreElement() {
59+
document.querySelector(
60+
".js-score"
61+
).innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}.`;
4262
}
43-

‎Rock-Paper-Scissors-Game/index.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
33
<head>
4-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
55
<title>Rock Paper Scissors Tutorial</title>
6-
<link rel="stylesheet" href="style.css">
6+
<link rel="stylesheet" href="style.css" />
77
</head>
88
<body>
99
<nav>ROCK PAPER SCISSORS GAME</nav>
1010
<div class="choice-container">
1111
<div>
12-
<h2> <img src="./public/computer.png" alt="" class="logo"> <br> Computer Choice</h2>
13-
<img id="computer-choice" src="" >
12+
<h2>
13+
<img src="./public/computer.png" alt="" class="logo" /> <br />
14+
Computer Choice
15+
</h2>
16+
<img id="computer-choice" src="" />
1417
</div>
1518
<div>
16-
<h2> <img src="./public/gamer.png" alt="" class="logo"> <br> User Choice</h2>
17-
<img id="user-choice" src="" >
19+
<h2>
20+
<img src="./public/gamer.png" alt="" class="logo" /> <br />
21+
User Choice
22+
</h2>
23+
<img id="user-choice" src="" />
1824
</div>
1925
</div>
2026

2127
<div class="button-container">
22-
<img id="Rock" src="./public/rock.png" alt="Rock"><br>
23-
<img id="Paper" src="./public/paper.png" alt="Paper">
24-
<img id="Scissors" src="./public/scissors.png" alt="Scissors">
28+
<img id="Rock" src="./public/rock.png" alt="Rock" /><br />
29+
<img id="Paper" src="./public/paper.png" alt="Paper" />
30+
<img id="Scissors" src="./public/scissors.png" alt="Scissors" />
2531
</div>
32+
<p class="js-score score"></p>
2633

2734
<div class="winner-container">
2835
<h2>Winner:</h2>

0 commit comments

Comments
 (0)