mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-26 16:00:56 -04:00
feat(curriculum): add review DOM manipulation project (#54768)
Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Jessica Wilkins
@@ -472,6 +472,13 @@
|
||||
"In this mini project, you will get to review JavaScript fundamentals like functions, variables, conditionals and more by building a gradebook app.",
|
||||
"This will give you an opportunity to solve small problems and get a better understanding of the basics."
|
||||
]
|
||||
},
|
||||
"review-dom-manipulation-by-building-a-rock-paper-scissors-game": {
|
||||
"title": "Review DOM Manipulation by Building a Rock, Paper, Scissors Game",
|
||||
"intro": [
|
||||
"In the previous projects you learned how to work with basic DOM manipulation. Now it is time to review what you have learned by building a Rock, Paper, Scissors game.",
|
||||
"In this mini project, you will review conditionals, functions, <code>getElementById</code>, and more. This project will give you an opportunity to solve small problems and get a better understanding of the basics."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Review DOM Manipulation by Building a Rock, Paper, Scissors Game
|
||||
block: review-dom-manipulation-by-building-a-rock-paper-scissors-game
|
||||
superBlock: javascript-algorithms-and-data-structures-v8
|
||||
---
|
||||
|
||||
## Introduction to the Review DOM Manipulation by Building a Rock, Paper, Scissors Game
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-cash-register-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 19,
|
||||
"order": 20,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-palindrome-checker-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 6,
|
||||
"order": 7,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-pokemon-search-app-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 22,
|
||||
"order": 23,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-roman-numeral-converter-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 10,
|
||||
"order": 11,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"dashedName": "build-a-telephone-number-validator-project",
|
||||
"usesMultifileEditor": true,
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 15,
|
||||
"order": 16,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-advanced-array-methods-by-building-a-statistics-calculator",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 13,
|
||||
"order": 14,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 21,
|
||||
"order": 22,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-algorithmic-thinking-by-building-a-number-sorter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 12,
|
||||
"order": 13,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-oop-by-building-a-shopping-cart",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 16,
|
||||
"order": 17,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-string-and-array-methods-by-building-a-music-player",
|
||||
"order": 4,
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-fetch-and-promises-by-building-an-fcc-authors-page",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 20,
|
||||
"order": 21,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-functional-programming-by-building-a-spreadsheet",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 14,
|
||||
"order": 15,
|
||||
"time": "2 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-algorithmic-thinking-by-building-a-dice-game",
|
||||
"order": 18,
|
||||
"order": 19,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-oop-by-building-a-platformer-game",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 17,
|
||||
"order": 18,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-localstorage-by-building-a-todo-app",
|
||||
"order": 8,
|
||||
"order": 9,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-modern-javascript-methods-by-building-football-team-cards",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 7,
|
||||
"order": 8,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-recursion-by-building-a-decimal-to-binary-converter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 9,
|
||||
"order": 10,
|
||||
"superOrder": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-regular-expressions-by-building-a-spam-filter",
|
||||
"helpCategory": "JavaScript",
|
||||
"order": 11,
|
||||
"order": 12,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-the-date-object-by-building-a-date-formatter",
|
||||
"order": 5,
|
||||
"order": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "Review DOM Manipulation by Building a Rock, Paper, Scissors Game",
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "review-dom-manipulation-by-building-a-rock-paper-scissors-game",
|
||||
"order": 4,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "javascript-algorithms-and-data-structures-v8",
|
||||
"superOrder": 4,
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "663d0ab797cb716189ffcc0a",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "663d18c574456976d11b6e87",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "663d2f8056542a8066fd6cc6",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "663d4008cee64e05dfb08f0d",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "663d5697d80fef0eea026672",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "663d5bebe2eef6128a0b1e75",
|
||||
"title": "Step 6"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
id: 663d0ab797cb716189ffcc0a
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first step is to build out the function that will generate a random choice for the computer.
|
||||
|
||||
The `getRandomComputerResult` function will be used to get the computer's choice. Inside that function, you should see an `options` array with `"Rock"`, `"Paper"`, and `"Scissors"`.
|
||||
|
||||
Your task is to complete the `getRandomComputerResult` function so that it returns a random option from the `options` array.
|
||||
|
||||
**Tips**
|
||||
|
||||
- You can use `Math.random()` and `Math.floor()` to help you get a random whole number. This will represent the index number for the `options` array.
|
||||
- You can use the random index to access the option from the `options` array.
|
||||
|
||||
|
||||
# --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
|
||||
assert.include(["Rock", "Paper", "Scissors"], getRandomComputerResult());
|
||||
assert.include(["Rock", "Paper", "Scissors"], getRandomComputerResult());
|
||||
assert.include(["Rock", "Paper", "Scissors"], getRandomComputerResult());
|
||||
```
|
||||
|
||||
# --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--
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
|
||||
}
|
||||
console.log(getRandomComputerResult());
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 663d18c574456976d11b6e87
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the game, there will be multiple rounds. The first to reach three points wins the game.
|
||||
|
||||
In this step, you will focus on determining if the player has won the round.
|
||||
|
||||
Complete the `hasPlayerWonTheRound` function. This function has two parameters: `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"`
|
||||
|
||||
A few function calls have been provided for you to test your function.
|
||||
|
||||
# --hints--
|
||||
|
||||
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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
|
||||
}
|
||||
|
||||
console.log(hasPlayerWonTheRound("Rock", "Scissors"));
|
||||
console.log(hasPlayerWonTheRound("Scissors", "Rock"));
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
id: 663d2f8056542a8066fd6cc6
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is 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`.
|
||||
|
||||
**Tips**
|
||||
|
||||
- Remember you can use the `hasPlayerWonTheRound` function to check if the player wins the round.
|
||||
- You can use template literals or regular string concatenation to build the message.
|
||||
|
||||
|
||||
# --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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
let playerScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
return (
|
||||
(player === "Rock" && computer === "Scissors") ||
|
||||
(player === "Scissors" && computer === "Paper") ||
|
||||
(player === "Paper" && computer === "Rock")
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
}
|
||||
|
||||
console.log(getRoundResults("Rock"));
|
||||
console.log("Player Score: ", playerScore, "Computer Score: ", computerScore);
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 663d4008cee64e05dfb08f0d
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to update the scores and the round results message.
|
||||
|
||||
Complete the `showResults` function. The `playerScoreSpanElement` and `computerScoreSpanElement` should be updated to show the updated scores of the player and computer.
|
||||
|
||||
The `roundResultsMsg` should also be updated with the result of the round.
|
||||
|
||||
**Tips**
|
||||
|
||||
- Remember that you learned how to work with the `innerText` property to update the text content of an element.
|
||||
- You can use the `getRoundResults` function to get the result of the round.
|
||||
|
||||
# --hints--
|
||||
|
||||
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
|
||||
assert.equal(computerScoreSpanElement.innerText, computerScore);
|
||||
```
|
||||
|
||||
Your `showResults` function should update the `playerScoreSpanElement` to show the updated score of the player.
|
||||
|
||||
```js
|
||||
assert.equal(playerScoreSpanElement.innerText, playerScore);
|
||||
```
|
||||
|
||||
# --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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
return (
|
||||
(player === "Rock" && computer === "Scissors") ||
|
||||
(player === "Scissors" && computer === "Paper") ||
|
||||
(player === "Paper" && computer === "Rock")
|
||||
);
|
||||
}
|
||||
|
||||
let playerScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
if (hasPlayerWonTheRound(userOption, computerResult)) {
|
||||
playerScore++;
|
||||
return `Player wins! ${userOption} beats ${computerResult}`;
|
||||
} else if (computerResult === userOption) {
|
||||
return `It's a tie! Both chose ${userOption}`;
|
||||
} else {
|
||||
computerScore++;
|
||||
return `Computer wins! ${computerResult} beats ${userOption}`;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const playerScoreSpanElement = document.getElementById("player-score");
|
||||
const computerScoreSpanElement = document.getElementById("computer-score");
|
||||
const roundResultsMsg = document.getElementById("results-msg");
|
||||
|
||||
function showResults(userOption) {
|
||||
|
||||
};
|
||||
|
||||
showResults("Rock");
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 663d5697d80fef0eea026672
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Inside your `showResults` function, you will need to check if the player or computer has reached three points. If either has reached three points, you should display a message indicating the winner.
|
||||
|
||||
For example, if the player has won the game, then the `winnerMsgElement` should be updated to `"Player has won the game!"`. If the computer has won the game, then the `winnerMsgElement` should be updated to `"Computer has won the game!"`.
|
||||
|
||||
If there is a winner, you will want to show the `resetGameBtn` button and hide the `optionsContainer` so the player can play again.
|
||||
|
||||
**Tips**
|
||||
|
||||
- You can use the `el.style.display` property to show the `resetGameBtn` button and hide the `optionsContainer`.
|
||||
|
||||
# --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` and 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");
|
||||
assert.notEqual(resetGameBtn.style.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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
return (
|
||||
(player === "Rock" && computer === "Scissors") ||
|
||||
(player === "Scissors" && computer === "Paper") ||
|
||||
(player === "Paper" && computer === "Rock")
|
||||
);
|
||||
}
|
||||
|
||||
let playerScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
if (hasPlayerWonTheRound(userOption, computerResult)) {
|
||||
playerScore++;
|
||||
return `Player wins! ${userOption} beats ${computerResult}`;
|
||||
} else if (computerResult === userOption) {
|
||||
return `It's a tie! Both chose ${userOption}`;
|
||||
} else {
|
||||
computerScore++;
|
||||
return `Computer wins! ${computerResult} beats ${userOption}`;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const playerScoreSpanElement = document.getElementById("player-score");
|
||||
const computerScoreSpanElement = document.getElementById("computer-score");
|
||||
const roundResultsMsg = document.getElementById("results-msg");
|
||||
const winnerMsgElement = document.getElementById("winner-msg");
|
||||
const optionsContainer = document.querySelector(".options-container");
|
||||
const resetGameBtn = document.getElementById("reset-game-btn");
|
||||
|
||||
function showResults(userOption) {
|
||||
roundResultsMsg.innerText = getRoundResults(userOption);
|
||||
computerScoreSpanElement.innerText = computerScore;
|
||||
playerScoreSpanElement.innerText = playerScore;
|
||||
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
|
||||
const rockBtn = document.getElementById("rock-btn");
|
||||
const paperBtn = document.getElementById("paper-btn");
|
||||
const scissorsBtn = document.getElementById("scissors-btn");
|
||||
|
||||
rockBtn.addEventListener("click", function () {
|
||||
showResults("Rock");
|
||||
});
|
||||
|
||||
paperBtn.addEventListener("click", function () {
|
||||
showResults("Paper");
|
||||
});
|
||||
|
||||
scissorsBtn.addEventListener("click", function () {
|
||||
showResults("Scissors");
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,565 @@
|
||||
---
|
||||
id: 663d5bebe2eef6128a0b1e75
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If the player or computer has won the game, there should be an option to reset the game and play again.
|
||||
|
||||
Complete the `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.
|
||||
- Sets the `roundResultsMsg` and `winnerMsgElement` to empty strings.
|
||||
|
||||
Once you apply those changes, you will have completed the Rock, Paper, Scissors game!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `resetGame` function should set the `playerScore` to `0`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(playerScore, 0);
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `computerScore` to `0`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(computerScore, 0);
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `playerScoreSpanElement` to `0`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(playerScoreSpanElement.innerText, "0");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `computerScoreSpanElement` to `0`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(computerScoreSpanElement.innerText, "0");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `roundResultsMsg` to an empty string.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(roundResultsMsg.innerText, "");
|
||||
```
|
||||
|
||||
Your `resetGame` function should set the `winnerMsgElement` to an empty string.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
assert.equal(winnerMsgElement.innerText, "");
|
||||
```
|
||||
|
||||
Your `resetGame` function should hide the `resetGameBtn`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
const computedStyle = window.getComputedStyle(resetGameBtn).display;
|
||||
assert.equal(computedStyle, "none");
|
||||
```
|
||||
|
||||
Your `resetGame` function should show the `optionsContainer`.
|
||||
|
||||
```js
|
||||
rockBtn.click();
|
||||
resetGame();
|
||||
const computedStyle = window.getComputedStyle(optionsContainer).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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
return (
|
||||
(player === "Rock" && computer === "Scissors") ||
|
||||
(player === "Scissors" && computer === "Paper") ||
|
||||
(player === "Paper" && computer === "Rock")
|
||||
);
|
||||
}
|
||||
|
||||
let playerScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
if (hasPlayerWonTheRound(userOption, computerResult)) {
|
||||
playerScore++;
|
||||
return `Player wins! ${userOption} beats ${computerResult}`;
|
||||
} else if (computerResult === userOption) {
|
||||
return `It's a tie! Both chose ${userOption}`;
|
||||
} else {
|
||||
computerScore++;
|
||||
return `Computer wins! ${computerResult} beats ${userOption}`;
|
||||
}
|
||||
}
|
||||
|
||||
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--
|
||||
function resetGame() {
|
||||
|
||||
};
|
||||
--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
|
||||
function getRandomComputerResult() {
|
||||
const options = ["Rock", "Paper", "Scissors"];
|
||||
const randomIndex = Math.floor(Math.random() * options.length);
|
||||
return options[randomIndex];
|
||||
}
|
||||
|
||||
function hasPlayerWonTheRound(player, computer) {
|
||||
return (
|
||||
(player === "Rock" && computer === "Scissors") ||
|
||||
(player === "Scissors" && computer === "Paper") ||
|
||||
(player === "Paper" && computer === "Rock")
|
||||
);
|
||||
}
|
||||
|
||||
let playerScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
function getRoundResults(userOption) {
|
||||
const computerResult = getRandomComputerResult();
|
||||
|
||||
if (hasPlayerWonTheRound(userOption, computerResult)) {
|
||||
playerScore++;
|
||||
return `Player wins! ${userOption} beats ${computerResult}`;
|
||||
} else if (computerResult === userOption) {
|
||||
return `It's a tie! Both chose ${userOption}`;
|
||||
} else {
|
||||
computerScore++;
|
||||
return `Computer wins! ${computerResult} beats ${userOption}`;
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user