mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-03 05:02:01 -05:00
feat(curriculum): add rock paper scissors workshop (#55957)
Co-authored-by: Sem Bauke <sem@freecodecamp.org> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
@@ -2015,7 +2015,12 @@
|
||||
"ctwj": { "title": "195", "intro": [] },
|
||||
"fmbk": { "title": "196", "intro": [] },
|
||||
"nlbo": { "title": "197", "intro": [] },
|
||||
"bbyq": { "title": "198", "intro": [] },
|
||||
"workshop-rps-game": {
|
||||
"title": "Build a Rock, Paper, Scissors Game",
|
||||
"intro": [
|
||||
"In this workshop, you will review DOM manipulation and events by building a Rock, Paper, Scissors Game."
|
||||
]
|
||||
},
|
||||
"uglc": { "title": "199", "intro": [] },
|
||||
"vonu": { "title": "200", "intro": [] },
|
||||
"iejn": { "title": "201", "intro": [] },
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Rock, Paper, Scissors Game
|
||||
block: workshop-rps-game
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Build a Rock, Paper, Scissors Game
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
69
curriculum/challenges/_meta/workshop-rps-game/meta.json
Normal file
69
curriculum/challenges/_meta/workshop-rps-game/meta.json
Normal file
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"name": "Build a Rock, Paper, Scissors Game",
|
||||
"blockType": "workshop",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-rps-game",
|
||||
"order": 198,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "66d8fade439d513e5f77c906",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "66d05da61ff145d7a46fe41b",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "66cf13fe7619e9a1d57c7b5e",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "66cf315cff4d36b27da828ba",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "66d064c7d79408da050f8b2f",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "66cf33305293e1b35c1aef7f",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "66d068348ca093db469b4d59",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "66cf34fcb005e7b447141afd",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "66d0746099f6f3de3678fd26",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "66d076040c7d1cdf36525af9",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "66d081d79b1d57e1b42caabf",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "66cf35a75f891ab4f4e5497b",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "66d085d37aeffce2ef786de3",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "66cf3639aca119b5c00b02d3",
|
||||
"title": "Step 14"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
id: 66cf13fe7619e9a1d57c7b5e
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to build out the functionality that will generate a random choice for the computer.
|
||||
|
||||
Create a function called `getRandomComputerResult` that returns a random choice from the `options` array.
|
||||
|
||||
*Hint*: Don't forget that in the earlier JavaScript fundamentals section, you learned about using `Math.random()` and `Math.floor()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getRandomComputerResult` function should return a string.
|
||||
|
||||
```js
|
||||
assert.isString(getRandomComputerResult());
|
||||
```
|
||||
|
||||
Your `getRandomComputerResult` function should return one of the options in the `options` array.
|
||||
|
||||
```js
|
||||
assert.include(["Rock", "Paper", "Scissors"], getRandomComputerResult());
|
||||
```
|
||||
|
||||
Your `getRandomComputerResult` function should return a random option each time.
|
||||
|
||||
```js
|
||||
const results = new Set();
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
results.add(getRandomComputerResult());
|
||||
}
|
||||
|
||||
assert.hasAllKeys(results, ["Rock", "Paper", "Scissors"]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 66cf315cff4d36b27da828ba
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this step, you will focus on determining if the player has won the round.
|
||||
|
||||
Create a `hasPlayerWonTheRound` function with two parameters called `player` and `computer`.
|
||||
|
||||
The function should return `true` if the player has won the round, and `false` if the player has lost or tied the round.
|
||||
|
||||
Here are the criteria for the player to win a round:
|
||||
|
||||
- If the player chooses `"Rock"` and the computer chooses `"Scissors"`
|
||||
- If the player chooses `"Scissors"` and the computer chooses `"Paper"`
|
||||
- If the player chooses `"Paper"` and the computer chooses `"Rock"`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `hasPlayerWonTheRound`.
|
||||
|
||||
```js
|
||||
assert.isFunction(hasPlayerWonTheRound);
|
||||
```
|
||||
|
||||
Your function should have two parameters called `player` and `computer`.
|
||||
|
||||
```js
|
||||
assert.match(code, /hasPlayerWonTheRound\s*(?:=\s*)?\(\s*player\s*,\s*computer\s*\)\s*/);
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(hasPlayerWonTheRound("Rock", "Scissors"));
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Rock"` and the computer chose `"Scissors"`.
|
||||
|
||||
```js
|
||||
assert.isTrue(hasPlayerWonTheRound("Rock", "Scissors"));
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Scissors"` and the computer chose `"Paper"`.
|
||||
|
||||
```js
|
||||
assert.isTrue(hasPlayerWonTheRound("Scissors", "Paper"));
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return `true` if the player chose `"Paper"` and the computer chose `"Rock"`.
|
||||
|
||||
```js
|
||||
assert.isTrue(hasPlayerWonTheRound("Paper", "Rock"));
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return `false` if the player and computer chose the same option.
|
||||
|
||||
```js
|
||||
assert.isFalse(hasPlayerWonTheRound("Rock", "Rock"));
|
||||
assert.isFalse(hasPlayerWonTheRound("Scissors", "Scissors"));
|
||||
assert.isFalse(hasPlayerWonTheRound("Paper", "Paper"));
|
||||
```
|
||||
|
||||
Your `hasPlayerWonTheRound` function should return `false` if the computer won the round.
|
||||
|
||||
```js
|
||||
assert.isFalse(hasPlayerWonTheRound("Scissors", "Rock"));
|
||||
assert.isFalse(hasPlayerWonTheRound("Paper", "Scissors"));
|
||||
assert.isFalse(hasPlayerWonTheRound("Rock", "Paper"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 66cf33305293e1b35c1aef7f
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it’s time to get the results of the round. Complete the `getRoundResults` function.
|
||||
|
||||
If the player wins the round, update the `playerScore` by `1` and return the message `"Player wins! [player's choice] beats [computer's choice]"`.
|
||||
|
||||
If the computer and player choose the same option, return the message `"It's a tie! Both chose [player's choice]"`.
|
||||
|
||||
If the computer wins the round, update the `computerScore` by `1` and return the message `"Computer wins! [computer's choice] beats [player's choice]"`.
|
||||
|
||||
`[computer's choice]` should be replaced with `computerResult` while `[player's choice]` should be replaced with the `userOption`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getRoundResults` should return a string.
|
||||
|
||||
```js
|
||||
assert.isString(getRoundResults("Rock"));
|
||||
```
|
||||
|
||||
Your `getRoundResults` function should return the correct message based on who wins the round. If no one wins, the message should say it's a tie.
|
||||
|
||||
```js
|
||||
const result = getRoundResults("Paper")
|
||||
if(result.startsWith("Player wins!")){
|
||||
assert.strictEqual(result, "Player wins! Paper beats Rock")
|
||||
assert.isAtLeast(playerScore, 1)
|
||||
} else if(result.startsWith("Computer wins!")) {
|
||||
assert.strictEqual(result, "Computer wins! Scissors beats Paper")
|
||||
assert.isAtLeast(computerScore, 1)
|
||||
} else if(result.startsWith("It's a tie!")){
|
||||
assert.strictEqual(result, "It's a tie! Both chose Paper")
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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;
|
||||
|
||||
--fcc-editable-region--
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 66cf34fcb005e7b447141afd
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to update the scores and the round results message.
|
||||
|
||||
Create a `showResults` function with a parameter called `userOption`.
|
||||
|
||||
Inside your `showResults` function, the `roundResultsMsg` should be updated with the result of the round.
|
||||
|
||||
Then, the `playerScoreSpanElement` and `computerScoreSpanElement` should also be updated to show the updated scores of the player and computer.
|
||||
|
||||
Remember, that the order matters here. You will need to first update the `roundResultsMsg`, then the `playerScoreSpanElement`, and finally the `computerScoreSpanElement` because the `roundResultsMsg` will be used to determine the scores.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a function called `showResults`.
|
||||
|
||||
```js
|
||||
assert.isFunction(showResults);
|
||||
```
|
||||
|
||||
Your `showResults` function should have a parameter called `userOption`.
|
||||
|
||||
```js
|
||||
assert.match(code, /showResults\s*(?:=\s*)?(?:\(\s*)?userOption(?:\s*\))?\s*/);
|
||||
```
|
||||
|
||||
Your `showResults` function should update the `roundResultsMsg` with the result of the round.
|
||||
|
||||
```js
|
||||
const possibleResults = [
|
||||
"Player wins! Rock beats Scissors",
|
||||
"Player wins! Scissors beats Paper",
|
||||
"Player wins! Paper beats Rock",
|
||||
"Computer wins! Paper beats Rock",
|
||||
"Computer wins! Scissors beats Paper",
|
||||
"Computer wins! Rock beats Scissors",
|
||||
"It's a tie! Both chose Rock",
|
||||
"It's a tie! Both chose Scissors",
|
||||
"It's a tie! Both chose Paper"
|
||||
];
|
||||
showResults("Rock");
|
||||
assert.include(possibleResults, roundResultsMsg.innerText.replace(/\//g, "'"));
|
||||
```
|
||||
|
||||
Your `showResults` function should update the `computerScoreSpanElement` to show the updated score of the computer.
|
||||
|
||||
```js
|
||||
computerScore = 0;
|
||||
const oldRandomResult = getRandomComputerResult;
|
||||
getRandomComputerResult = () => "Rock";
|
||||
|
||||
showResults("Scissors");
|
||||
assert.equal(computerScoreSpanElement.innerText, "1");
|
||||
|
||||
getRandomComputerResult = oldRandomResult;
|
||||
```
|
||||
|
||||
Your `showResults` function should update the `playerScoreSpanElement` to show the updated score of the player.
|
||||
|
||||
```js
|
||||
playerScore = 0;
|
||||
const oldRandomResult = getRandomComputerResult;
|
||||
getRandomComputerResult = () => "Scissors";
|
||||
|
||||
showResults("Rock");
|
||||
assert.equal(playerScoreSpanElement.innerText, "1");
|
||||
|
||||
getRandomComputerResult = oldRandomResult;
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
const playerScoreSpanElement = document.getElementById("player-score");
|
||||
const computerScoreSpanElement = document.getElementById("computer-score");
|
||||
const roundResultsMsg = document.getElementById("results-msg");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,274 @@
|
||||
---
|
||||
id: 66cf35a75f891ab4f4e5497b
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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. You want to check if there's a winner, and display a message.
|
||||
|
||||
In your `showResults` function, if the player has reached three points, update the `winnerMsgElement` to `"Player has won the game!"`. If the computer has reached three points, update the `winnerMsgElement` to `"Computer has won the game!"`.
|
||||
|
||||
If there is a winner, show the `resetGameBtn` button by settings it's `display` to `block` and hide the `optionsContainer` by setting it's `display` to `none`.
|
||||
|
||||
Now, try to play the game and see if the winner message is displayed when a player reaches three points.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `winnerMsgElement` if there is a winner.
|
||||
|
||||
```js
|
||||
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` if the player or computer has reached three points.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
computerScore = 3;
|
||||
showResults("Rock");
|
||||
const computedStyle = window.getComputedStyle(resetGameBtn).display;
|
||||
assert.notEqual(computedStyle, "none");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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");
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,571 @@
|
||||
---
|
||||
id: 66cf3639aca119b5c00b02d3
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the final step of the workshop, you will need to build out the reset game functionality.
|
||||
|
||||
Create a `resetGame` function that accomplishes the following:
|
||||
|
||||
- Resets the player and computer scores to `0`.
|
||||
- Updates the `playerScoreSpanElement` and `computerScoreSpanElement` to display the new scores.
|
||||
- Hides the `resetGameBtn` button.
|
||||
- Shows the `optionsContainer` so the player can play again.
|
||||
- Clears the content for the `winnerMsgElement` and `roundResultsMsg` elements.
|
||||
|
||||
Try testing out the game by playing a few rounds until one of the players reaches `3` points. Then, click the `"Play again?"` button to see if the game resets correctly.
|
||||
|
||||
And with this final step, you have completed the Rock, Paper, Scissors game!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `resetGame` function should set the `playerScore` to `0`.
|
||||
|
||||
```js
|
||||
playerScore = 1;
|
||||
resetGame();
|
||||
assert.equal(playerScore, 0);
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `computerScore` to `0`.
|
||||
|
||||
```js
|
||||
computerScore = 1;
|
||||
resetGame();
|
||||
assert.equal(computerScore, 0);
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `playerScoreSpanElement` to `0`.
|
||||
|
||||
```js
|
||||
playerScoreSpanElement.innerText = "1";
|
||||
resetGame();
|
||||
assert.equal(playerScoreSpanElement.innerText, "0");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `computerScoreSpanElement` to `0`.
|
||||
|
||||
```js
|
||||
computerScoreSpanElement.innerText = "1";
|
||||
resetGame();
|
||||
assert.equal(computerScoreSpanElement.innerText, "0");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `roundResultsMsg` to an empty string.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
assert.notEqual(roundResultsMsg.innerText, "");
|
||||
resetGame();
|
||||
assert.equal(roundResultsMsg.innerText, "");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `winnerMsgElement` to an empty string.
|
||||
|
||||
```js
|
||||
winnerMsgElement.innerText = "Player has won the game!";
|
||||
resetGame();
|
||||
assert.equal(winnerMsgElement.innerText, "");
|
||||
```
|
||||
|
||||
Your `resetGame` function should hide the `resetGameBtn`.
|
||||
|
||||
```js
|
||||
playerScore = 3;
|
||||
computerScore = 3;
|
||||
rockBtn.click();
|
||||
assert.notEqual(window.getComputedStyle(resetGameBtn).display, "none");
|
||||
resetGame();
|
||||
assert.equal(window.getComputedStyle(resetGameBtn).display, "none");
|
||||
```
|
||||
|
||||
Your `resetGame` function should show the `optionsContainer`.
|
||||
|
||||
```js
|
||||
playerScore = 3;
|
||||
computerScore = 3;
|
||||
rockBtn.click();
|
||||
assert.equal(window.getComputedStyle(optionsContainer).display, "none");
|
||||
resetGame();
|
||||
assert.notEqual(window.getComputedStyle(optionsContainer).display, "none");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if (playerScore === 3 || computerScore === 3) {
|
||||
winnerMsgElement.innerText = `${
|
||||
playerScore === 3 ? "Player" : "Computer"
|
||||
} has won the game!`;
|
||||
|
||||
resetGameBtn.style.display = "block";
|
||||
optionsContainer.style.display = "none";
|
||||
}
|
||||
};
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
resetGameBtn.addEventListener("click", resetGame);
|
||||
|
||||
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");
|
||||
});
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if (playerScore === 3 || computerScore === 3) {
|
||||
winnerMsgElement.innerText = `${
|
||||
playerScore === 3 ? "Player" : "Computer"
|
||||
} has won the game!`;
|
||||
|
||||
resetGameBtn.style.display = "block";
|
||||
optionsContainer.style.display = "none";
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function resetGame() {
|
||||
playerScore = 0;
|
||||
computerScore = 0;
|
||||
computerScoreSpanElement.innerText = computerScore;
|
||||
playerScoreSpanElement.innerText = playerScore;
|
||||
roundResultsMsg.innerText = "";
|
||||
winnerMsgElement.innerText = "";
|
||||
optionsContainer.style.display = "block";
|
||||
resetGameBtn.style.display = "none";
|
||||
}
|
||||
|
||||
resetGameBtn.addEventListener("click", resetGame);
|
||||
|
||||
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");
|
||||
});
|
||||
```
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 66d05da61ff145d7a46fe41b
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the first part of the workshop, you will focus on building the functionality that generates a random choice for the computer.
|
||||
|
||||
Start by creating a variable called `options` and assign it an array with the following strings: `"Rock"`, `"Paper"`, and `"Scissors"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a variable called `options`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(options);
|
||||
```
|
||||
|
||||
Your `options` variable should be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(options);
|
||||
```
|
||||
|
||||
Your `options` array should contain the string `"Rock"`.
|
||||
|
||||
```js
|
||||
assert.include(options, "Rock");
|
||||
```
|
||||
|
||||
Your `options` array should contain the string `"Paper"`.
|
||||
|
||||
```js
|
||||
assert.include(options, "Paper");
|
||||
```
|
||||
|
||||
Your `options` array should contain the string `"Scissors"`.
|
||||
|
||||
```js
|
||||
assert.include(options, "Scissors");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
id: 66d064c7d79408da050f8b2f
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create the variables responsible for keeping track of the player and computer scores.
|
||||
|
||||
Create a variable called `playerScore` and initialize it with the value `0`.
|
||||
|
||||
Then, create a variable called `computerScore` and initialize it with the value `0`.
|
||||
|
||||
You will need to use `let` to declare these variables because their values will change throughout the game.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a variable called `playerScore`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(playerScore);
|
||||
```
|
||||
|
||||
You should use `let` to declare the `playerScore` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+playerScore/);
|
||||
```
|
||||
|
||||
Your `playerScore` should be initialized with the value `0`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(playerScore, 0);
|
||||
```
|
||||
|
||||
You should have a variable called `computerScore`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(computerScore);
|
||||
```
|
||||
|
||||
You should use `let` to declare the `computerScore` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+computerScore/);
|
||||
```
|
||||
|
||||
Your `computerScore` should be initialized with the value `0`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(computerScore, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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")
|
||||
);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 66d068348ca093db469b4d59
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next portion of the workshop is to create the functionality that will show the results.
|
||||
|
||||
Start by creating a variable called `playerScoreSpanElement` and assign it the value of the element with the id `player-score`.
|
||||
|
||||
Then create a variable called `computerScoreSpanElement` and assign it the value of the element with the id `computer-score`.
|
||||
|
||||
Finally, create a variable called `roundResultsMsg` and assign it the value of the element with the id `results-msg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a variable called `playerScoreSpanElement`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(playerScoreSpanElement);
|
||||
```
|
||||
|
||||
You should assign the value of the element with the id `player-score` to the `playerScoreSpanElement`.
|
||||
|
||||
```js
|
||||
assert.equal(playerScoreSpanElement, document.getElementById("player-score"));
|
||||
```
|
||||
|
||||
You should have a variable called `computerScoreSpanElement`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(computerScoreSpanElement);
|
||||
```
|
||||
|
||||
You should assign the value of the element with the id `computer-score` to the `computerScoreSpanElement`.
|
||||
|
||||
```js
|
||||
assert.equal(computerScoreSpanElement, document.getElementById("computer-score"));
|
||||
```
|
||||
|
||||
You should have a variable called `roundResultsMsg`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(roundResultsMsg);
|
||||
```
|
||||
|
||||
You should assign the value of the element with the id `results-msg` to the `roundResultsMsg`.
|
||||
|
||||
```js
|
||||
assert.equal(roundResultsMsg, document.getElementById("results-msg"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 66d0746099f6f3de3678fd26
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to test out your `showResults` function.
|
||||
|
||||
Start by creating a variable called `rockBtn` and assign it the value of the button with the id of `rock-btn`.
|
||||
|
||||
Then, create a variable called `paperBtn` and assign it the value of the button with the id of `paper-btn`.
|
||||
|
||||
Finally, create a variable called `scissorsBtn` and assign it the value of the button with the id of `scissors-btn`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a variable called `rockBtn`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(rockBtn);
|
||||
```
|
||||
|
||||
Your `rockBtn` variable should be assigned to the button with the id of `rock-btn`.
|
||||
|
||||
```js
|
||||
assert.equal(rockBtn, document.getElementById("rock-btn"));
|
||||
```
|
||||
|
||||
You should have a variable called `paperBtn`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(paperBtn);
|
||||
```
|
||||
|
||||
Your `paperBtn` variable should be assigned to the button with the id of `paper-btn`.
|
||||
|
||||
```js
|
||||
assert.equal(paperBtn, document.getElementById("paper-btn"));
|
||||
```
|
||||
|
||||
You should have a variable called `scissorsBtn`.
|
||||
|
||||
```js
|
||||
assert.isNotNull(scissorsBtn);
|
||||
```
|
||||
|
||||
Your `scissorsBtn` variable should be assigned to the button with the id of `scissors-btn`.
|
||||
|
||||
```js
|
||||
assert.equal(scissorsBtn, document.getElementById("scissors-btn"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,277 @@
|
||||
---
|
||||
id: 66d076040c7d1cdf36525af9
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
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"`.
|
||||
|
||||
```js
|
||||
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"`.
|
||||
|
||||
```js
|
||||
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"`.
|
||||
|
||||
```js
|
||||
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);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
function resetRoundMsg() {
|
||||
roundResultsMsg.innerText = "";
|
||||
}
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
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--
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 66d081d79b1d57e1b42caabf
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the last portion of the workshop, you will focus on building out the winner message and reset button functionality.
|
||||
|
||||
Start by creating a variable called `winnerMsgElement` that will store the element with the id of `winner-msg`.
|
||||
|
||||
Then, create a variable called `optionsContainer` that will store the element with the class of `options-container`.
|
||||
|
||||
Finally, create a variable called `resetGameBtn` that will store the element with the id of `reset-game-btn`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `winnerMsgElement` variable.
|
||||
|
||||
```js
|
||||
assert.isNotNull(winnerMsgElement);
|
||||
```
|
||||
|
||||
Your `winnerMsgElement` variable should store the element with the id of `winner-msg`.
|
||||
|
||||
```js
|
||||
assert.equal(winnerMsgElement, document.getElementById("winner-msg"));
|
||||
```
|
||||
|
||||
You should have an `optionsContainer` variable.
|
||||
|
||||
```js
|
||||
assert.isNotNull(optionsContainer);
|
||||
```
|
||||
|
||||
Your `optionsContainer` variable should store the element with the class of `options-container`.
|
||||
|
||||
```js
|
||||
assert.equal(optionsContainer, document.querySelector(".options-container"));
|
||||
```
|
||||
|
||||
You should have a `resetGameBtn` variable.
|
||||
|
||||
```js
|
||||
assert.isNotNull(resetGameBtn);
|
||||
```
|
||||
|
||||
Your `resetGameBtn` variable should store the element with the id of `reset-game-btn`.
|
||||
|
||||
```js
|
||||
assert.equal(resetGameBtn, document.getElementById("reset-game-btn"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
const playerScoreSpanElement = document.getElementById("player-score");
|
||||
const computerScoreSpanElement = document.getElementById("computer-score");
|
||||
const roundResultsMsg = document.getElementById("results-msg");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
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");
|
||||
|
||||
rockBtn.addEventListener("click", function () {
|
||||
showResults("Rock");
|
||||
});
|
||||
|
||||
paperBtn.addEventListener("click", function () {
|
||||
showResults("Paper");
|
||||
});
|
||||
|
||||
scissorsBtn.addEventListener("click", function () {
|
||||
showResults("Scissors");
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,264 @@
|
||||
---
|
||||
id: 66d085d37aeffce2ef786de3
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the player or computer has won the game, there should be an option to reset the game and play again.
|
||||
|
||||
Add an event listener to the `resetGameBtn` button. Your event listener should take in a `"click"` event and a reference to the `resetGame` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an event listener to the `resetGameBtn` button. The event listener should take in a `"click"` event and a reference to the `resetGame` function.
|
||||
|
||||
```js
|
||||
resetGameBtn.click();
|
||||
assert.strictEqual(testMsg, "Game has been reset");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```js
|
||||
let testMsg;
|
||||
function resetGame() {
|
||||
// this is just to test the event listener
|
||||
testMsg = "Game has been reset";
|
||||
}
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
function getRandomComputerResult() {
|
||||
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}`;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if (playerScore === 3 || computerScore === 3) {
|
||||
winnerMsgElement.innerText = `${
|
||||
playerScore === 3 ? "Player" : "Computer"
|
||||
} has won the game!`;
|
||||
|
||||
resetGameBtn.style.display = "block";
|
||||
optionsContainer.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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");
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 66d8fade439d513e5f77c906
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will continue to practice working with the DOM and event handling by building a Rock, Paper, Scissors game.
|
||||
|
||||
The HTML and CSS boilerplate for the game has been provided for you.
|
||||
|
||||
On the screen, you will see the rules to the game, the player and computer scores and the buttons for the user to select Rock, Paper, or Scissors.
|
||||
|
||||
Your task over the next few steps is to build the JavaScript functionality that generates a computer choice, compares it to the player's choice, and updates the scores accordingly.
|
||||
|
||||
Take some time to look through the HTML provided and familiarize yourself with the structure of the game.
|
||||
|
||||
When you're ready, click on the `"Check your code"` button to proceed to the next step and start the workshop.
|
||||
|
||||
# --hints--
|
||||
|
||||
Submit to continue.
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!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>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
*,
|
||||
*::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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user