From 623cb01f0f7639392f374b0d2908add52da5529c Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Tue, 14 May 2024 13:47:38 -0700 Subject: [PATCH] feat(curriculum): add review DOM manipulation project (#54768) Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Co-authored-by: Naomi --- client/i18n/locales/english/intro.json | 7 + .../index.md | 9 + .../build-a-cash-register-project/meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 2 +- .../meta.json | 40 ++ .../663d0ab797cb716189ffcc0a.md | 209 +++++++ .../663d18c574456976d11b6e87.md | 238 ++++++++ .../663d2f8056542a8066fd6cc6.md | 233 ++++++++ .../663d4008cee64e05dfb08f0d.md | 253 ++++++++ .../663d5697d80fef0eea026672.md | 275 +++++++++ .../663d5bebe2eef6128a0b1e75.md | 565 ++++++++++++++++++ 28 files changed, 1848 insertions(+), 19 deletions(-) create mode 100644 client/src/pages/learn/javascript-algorithms-and-data-structures-v8/review-dom-manipulation-by-building-a-rock-paper-scissors-game/index.md create mode 100644 curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d18c574456976d11b6e87.md create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d2f8056542a8066fd6cc6.md create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d4008cee64e05dfb08f0d.md create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5697d80fef0eea026672.md create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5bebe2eef6128a0b1e75.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 3605b5adf80..f1163a108d3 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -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, getElementById, and more. This project will give you an opportunity to solve small problems and get a better understanding of the basics." + ] } } }, diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/review-dom-manipulation-by-building-a-rock-paper-scissors-game/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/review-dom-manipulation-by-building-a-rock-paper-scissors-game/index.md new file mode 100644 index 00000000000..879d3f50f5c --- /dev/null +++ b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/review-dom-manipulation-by-building-a-rock-paper-scissors-game/index.md @@ -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. diff --git a/curriculum/challenges/_meta/build-a-cash-register-project/meta.json b/curriculum/challenges/_meta/build-a-cash-register-project/meta.json index 32bcd54ef4c..b5171d45018 100644 --- a/curriculum/challenges/_meta/build-a-cash-register-project/meta.json +++ b/curriculum/challenges/_meta/build-a-cash-register-project/meta.json @@ -4,7 +4,7 @@ "dashedName": "build-a-cash-register-project", "usesMultifileEditor": true, "helpCategory": "JavaScript", - "order": 19, + "order": 20, "time": "30 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json b/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json index d516e9f0b07..ab367117a39 100644 --- a/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json +++ b/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json @@ -4,7 +4,7 @@ "dashedName": "build-a-palindrome-checker-project", "usesMultifileEditor": true, "helpCategory": "JavaScript", - "order": 6, + "order": 7, "time": "30 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json b/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json index 803344f9d1a..605e582716e 100644 --- a/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json +++ b/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json @@ -4,7 +4,7 @@ "dashedName": "build-a-pokemon-search-app-project", "usesMultifileEditor": true, "helpCategory": "JavaScript", - "order": 22, + "order": 23, "time": "30 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json b/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json index 60b36c4acdf..350e84019fc 100644 --- a/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json +++ b/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json @@ -4,7 +4,7 @@ "dashedName": "build-a-roman-numeral-converter-project", "usesMultifileEditor": true, "helpCategory": "JavaScript", - "order": 10, + "order": 11, "time": "30 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json b/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json index 8316b37ef6c..697ff058dfb 100644 --- a/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json +++ b/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json @@ -4,7 +4,7 @@ "dashedName": "build-a-telephone-number-validator-project", "usesMultifileEditor": true, "helpCategory": "JavaScript", - "order": 15, + "order": 16, "time": "30 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json b/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json index bae6863b7ce..3cf7858e94f 100644 --- a/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json +++ b/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json b/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json index 38f1c44b13f..b0bc5ea9021 100644 --- a/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json +++ b/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json b/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json index 466bc33964e..c1a8422d7cb 100644 --- a/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json +++ b/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json b/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json index 733edfaba0f..624886b76a2 100644 --- a/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json +++ b/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json index ba26f13d201..c7e6c9be190 100644 --- a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json +++ b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json b/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json index a105684f93e..c2bc4cac1de 100644 --- a/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json +++ b/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json b/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json index 809871e55ad..aa753477b5a 100644 --- a/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json +++ b/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json index d2e36b287bd..de931807f6f 100644 --- a/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json +++ b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json b/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json index 062a9cfb59c..d9dc038fb4b 100644 --- a/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json +++ b/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json index a09379e58fc..a8a1977cf07 100644 --- a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json +++ b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json b/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json index a6caa4d28b4..609affd2cfa 100644 --- a/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json +++ b/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json b/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json index 2c11fe0175c..cf0a6eb1f80 100644 --- a/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json +++ b/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json @@ -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": "", diff --git a/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json b/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json index a802a62bfe6..33d3a70a983 100644 --- a/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json +++ b/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json index 6f1e0352a76..e67d9cd26ab 100644 --- a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json +++ b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json @@ -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": [], diff --git a/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json b/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json new file mode 100644 index 00000000000..31a3f72673f --- /dev/null +++ b/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json @@ -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" +} \ No newline at end of file diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md new file mode 100644 index 00000000000..94a194a42a9 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d18c574456976d11b6e87.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d18c574456976d11b6e87.md new file mode 100644 index 00000000000..c7358eeb0c9 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d18c574456976d11b6e87.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d2f8056542a8066fd6cc6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d2f8056542a8066fd6cc6.md new file mode 100644 index 00000000000..ad748bdf522 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d2f8056542a8066fd6cc6.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d4008cee64e05dfb08f0d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d4008cee64e05dfb08f0d.md new file mode 100644 index 00000000000..47993abf27c --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d4008cee64e05dfb08f0d.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5697d80fef0eea026672.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5697d80fef0eea026672.md new file mode 100644 index 00000000000..7a1744c370c --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5697d80fef0eea026672.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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"); +}); +``` diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5bebe2eef6128a0b1e75.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5bebe2eef6128a0b1e75.md new file mode 100644 index 00000000000..59751e48cb6 --- /dev/null +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d5bebe2eef6128a0b1e75.md @@ -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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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 + + + + + + Rock, Paper, Scissors game + + + +

Let's play Rock, Paper, Scissors!

+
+
+ Rules to the game + +

You will be playing against the computer.

+

You can choose between Rock, Paper, and Scissors.

+

The first one to three points wins.

+ +

Here are the rules to getting a point in the game:

+
    +
  • Rock beats Scissors
    • +
  • Scissors beats Paper
    • +
  • Paper beats Rock
    • +
+

+ If the player and computer choose the same option (Ex. Paper and + Paper), then no one gets the point. +

+
+ +
+ Player Score: 0 + Computer Score: + 0 +
+ +
+

Choose an option:

+
+ + + +
+
+ +
+

+

+ +
+
+ + + + +``` + +```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"); +}); +```