curriculum/challenges/english/blocks/workshop-rps-game/66d076040c7d1cdf36525af9.md
The next step is to attach event listeners to each of the buttons you created in the previous step.
Start by creating an event listener for the rockBtn button. When the rockBtn button is clicked, you should call the showResults function with the argument "Rock".
Then, create an event listener for the paperBtn button. When the paperBtn button is clicked, you should call the showResults function with the argument "Paper".
Finally, create an event listener for the scissorsBtn button. When the scissorsBtn button is clicked, you should call the showResults function with the argument "Scissors".
Now, you should be able to click on any of the buttons and see the results for each round.
function resetRoundMsg() {
roundResultsMsg.innerText = "";
}
You should attach an addEventListener to the rockBtn button. Your event listener should take a "click" event and callback function that calls the showResults function with the argument "Rock".
resetRoundMsg();
rockBtn.click();
const availableOptions = [
"It's a tie! Both chose Rock",
"Computer wins! Paper beats Rock",
"Player wins! Rock beats Scissors",
]
assert.include(availableOptions, roundResultsMsg.innerText);
You should attach an addEventListener to the paperBtn button. Your event listener should take a "click" event and callback function that calls the showResults function with the argument "Paper".
resetRoundMsg();
paperBtn.click();
const availableOptions = [
"Player wins! Paper beats Rock",
"It's a tie! Both chose Paper",
"Computer wins! Scissors beats Paper",
]
assert.include(availableOptions, roundResultsMsg.innerText);
You should attach an addEventListener to the scissorsBtn button. Your event listener should take a "click" event and callback function that calls the showResults function with the argument "Scissors".
resetRoundMsg();
scissorsBtn.click();
const availableOptions = [
"Player wins! Scissors beats Paper",
"It's a tie! Both chose Scissors",
"Computer wins! Rock beats Scissors",
]
assert.include(availableOptions, roundResultsMsg.innerText);
<!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 (e.g., 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;
}
const options = ["Rock", "Paper", "Scissors"];
function getRandomComputerResult() {
const randomIndex = Math.floor(Math.random() * options.length);
return options[randomIndex];
}
function hasPlayerWonTheRound(playerChoice, computerChoice) {
return (
(playerChoice === "Rock" && computerChoice === "Scissors") ||
(playerChoice === "Scissors" && computerChoice === "Paper") ||
(playerChoice === "Paper" && computerChoice === "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}`;
}
}
const playerScoreSpanElement = document.getElementById("player-score");
const computerScoreSpanElement = document.getElementById("computer-score");
const roundResultsMsg = document.getElementById("results-msg");
function showResults(userOption) {
roundResultsMsg.innerText = getRoundResults(userOption);
computerScoreSpanElement.innerText = computerScore;
playerScoreSpanElement.innerText = playerScore;
};
const rockBtn = document.getElementById("rock-btn");
const paperBtn = document.getElementById("paper-btn");
const scissorsBtn = document.getElementById("scissors-btn");
--fcc-editable-region--
--fcc-editable-region--