curriculum/challenges/english/blocks/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5697d80fef0eea026672.md
If you try to play the game, you will see that you can play for an infinite amount of rounds. But the rules state that the first one to three points wins.
Inside your showResults function, you will need to check if the player or computer has reached three points. If either has reached three points, you should display a message indicating the winner.
For example, if the player has won the game, then the winnerMsgElement should be updated to "Player has won the game!". If the computer has won the game, then the winnerMsgElement should be updated to "Computer has won the game!".
If there is a winner, you will want to show the resetGameBtn button and hide the optionsContainer so the player can play again.
Tips
Use the style.display property on an element, with the value "block" or "none", to show or hide the element.
You should update the winnerMsgElement if there is a winner.
while (playerScore < 3 && computerScore < 3) {
showResults("Rock");
}
if (playerScore === 3) {
assert.equal(winnerMsgElement.innerText, "Player has won the game!");
} else {
assert.equal(winnerMsgElement.innerText, "Computer has won the game!");
}
You should hide the optionsContainer and if the player or computer has reached three points.
playerScore = 3;
showResults("Scissors");
assert.equal(optionsContainer.style.display, "none");
You should show the resetGameBtn button if the player or computer has reached three points.
computerScore = 3;
showResults("Rock");
const computedStyle = window.getComputedStyle(resetGameBtn).display;
assert.notEqual(computedStyle, "none");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock, Paper, Scissors game</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1>Let's play Rock, Paper, Scissors!</h1>
<main>
<details class="rules-container">
<summary>Rules to the game</summary>
<p>You will be playing against the computer.</p>
<p>You can choose between Rock, Paper, and Scissors.</p>
<p>The first one to three points wins.</p>
<p>Here are the rules to getting a point in the game:</p>
<ul>
<li>Rock beats Scissors</li>
<li>Scissors beats Paper</li>
<li>Paper beats Rock</li>
</ul>
<p>
If the player and computer choose the same option (Ex. Paper and
Paper), then no one gets the point.
</p>
</details>
<div class="score-container">
<strong
>Player Score: <span class="score" id="player-score">0</span></strong
>
<strong
>Computer Score:
<span class="score" id="computer-score">0</span></strong
>
</div>
<section class="options-container">
<h2>Choose an option:</h2>
<div class="btn-container">
<button id="rock-btn" class="btn">Rock</button>
<button id="paper-btn" class="btn">Paper</button>
<button id="scissors-btn" class="btn">Scissors</button>
</div>
</section>
<div class="results-container">
<p id="results-msg"></p>
<p id="winner-msg"></p>
<button class="btn" id="reset-game-btn">Play again?</button>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--very-dark-blue: #0a0a23;
--white: #ffffff;
--yellow: #f1be32;
--golden-yellow: #feac32;
}
body {
background-color: var(--very-dark-blue);
text-align: center;
color: var(--white);
}
h1 {
margin: 15px 0 20px;
}
.btn {
cursor: pointer;
width: 100px;
margin: 10px;
color: var(--very-dark-blue);
background-color: var(--golden-yellow);
background-image: linear-gradient(#fecc4c, #ffac33);
border-color: var(--golden-yellow);
border-width: 3px;
}
.btn:hover {
background-image: linear-gradient(#ffcc4c, #f89808);
}
.rules-container {
padding: 10px 0;
margin: auto;
border-radius: 15px;
border: 5px solid var(--yellow);
background-color: var(--white);
color: var(--very-dark-blue);
}
.rules-container ul {
list-style-type: none;
}
.rules-container p {
margin: 10px 0;
}
@media (min-width: 760px) {
.rules-container {
width: 60%;
}
}
.score-container {
display: flex;
justify-content: space-around;
margin: 30px 0;
font-size: 1.2rem;
}
.score {
font-weight: 500;
}
.results-container {
font-size: 1.3rem;
margin: 15px 0;
}
#winner-msg {
margin-top: 25px;
}
#reset-game-btn {
display: none;
margin: 20px auto;
}
function getRandomComputerResult() {
const options = ["Rock", "Paper", "Scissors"];
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
function hasPlayerWonTheRound(player, computer) {
return (
(player === "Rock" && computer === "Scissors") ||
(player === "Scissors" && computer === "Paper") ||
(player === "Paper" && computer === "Rock")
);
}
let playerScore = 0;
let computerScore = 0;
function getRoundResults(userOption) {
const computerResult = getRandomComputerResult();
if (hasPlayerWonTheRound(userOption, computerResult)) {
playerScore++;
return `Player wins! ${userOption} beats ${computerResult}`;
} else if (computerResult === userOption) {
return `It's a tie! Both chose ${userOption}`;
} else {
computerScore++;
return `Computer wins! ${computerResult} beats ${userOption}`;
}
}
--fcc-editable-region--
const playerScoreSpanElement = document.getElementById("player-score");
const computerScoreSpanElement = document.getElementById("computer-score");
const roundResultsMsg = document.getElementById("results-msg");
const winnerMsgElement = document.getElementById("winner-msg");
const optionsContainer = document.querySelector(".options-container");
const resetGameBtn = document.getElementById("reset-game-btn");
function showResults(userOption) {
roundResultsMsg.innerText = getRoundResults(userOption);
computerScoreSpanElement.innerText = computerScore;
playerScoreSpanElement.innerText = playerScore;
};
--fcc-editable-region--
const rockBtn = document.getElementById("rock-btn");
const paperBtn = document.getElementById("paper-btn");
const scissorsBtn = document.getElementById("scissors-btn");
rockBtn.addEventListener("click", function () {
showResults("Rock");
});
paperBtn.addEventListener("click", function () {
showResults("Paper");
});
scissorsBtn.addEventListener("click", function () {
showResults("Scissors");
});