From 17c73c6cdfc48d87b97327e3a04856cad9d01a6c Mon Sep 17 00:00:00 2001 From: Cake Date: Thu, 3 Aug 2023 22:35:14 +0200 Subject: [PATCH 01/20] Improve clarity, wording and punctuation of the "rock paper scissors" project --- .../project_rock_paper_scissors.md | 56 ++++++++++--------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 065b3e32c0f..8af7f35be6f 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,42 +1,46 @@ ### Introduction -We're going to make a simple implementation of grade-school classic "rock paper scissors". If you don't know what that is check the [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or [this](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) detailed step-by-step. For the moment we're just going to play the game from the browser console, but __we will revisit this project in a later lesson and add a Graphical User Interface with buttons and text,__ so don't forget to keep the code on GitHub! You might notice some 'Live Preview' links in the student solutions that have a GUI - this is coming in a later lesson. When you get there don't forget to come back and add your link! +In this project, we'll create a simple implementation of the classic grade-school game "rock paper scissors". If you're unfamiliar with this game, check out this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). + +We'll start by playing the game entirely from the browser console. Later on, **we'll revisit this project to add a Graphical User Interface (GUI) with buttons and text**. So don't forget to save the code on GitHub! Some student solutions below might already have a GUI, but we'll cover that in a later lesson. Let's get started with a few quick exercises before we start the project! + ### Quick exercises before starting -1. Identify three ways to include JavaScript in a page. -2. Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console. +1. Identify three ways to include JavaScript in a page. +2. Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console. -Finally, this is your first JavaScript program built from scratch, so don't forget the previous lesson on problem solving. Plan your solution out before writing any code, and test each piece as you build to ensure it is working before moving on to the next! +Before we dive into the project, remember that this is your first JavaScript program built from scratch. So, don't forget the previous lesson on problem-solving. Plan your solution before writing any code and test each piece as you build to ensure it works before moving on to the next step! ### Assignment
Don't forget to commit early & often! You can [reference the Commit Message lesson here](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)! -1. Start a new Git repo for your project. -2. Create a blank HTML document with a script tag (Hint: it is best practice to link an external .js file). This game is going to be played completely from the console, so don't worry about putting anything else in there. -3. Your game is going to play against the computer, so begin with a function called `getComputerChoice` that will randomly return either 'Rock', 'Paper' or 'Scissors'. We'll use this function in the game to make the computer's play. *Tip: use the console to make sure this is returning the expected output before moving to the next step!* -4. Write a function that plays a single round of Rock Paper Scissors. The function should take two parameters - the `playerSelection` and `computerSelection` - and then return a string that declares the winner of the round like so: `"You Lose! Paper beats Rock"` - * Make your function's playerSelection parameter case-insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation). - -5. **Important note:** you want to `return` the results of this function call, _not_ `console.log()` them. You're going to use what you `return` later on, so let's test this function by using console.log to see the results: - - ~~~javascript - function playRound(playerSelection, computerSelection) { - // your code here! - } +1. Start a new Git repository for your project. +2. Create a blank HTML document with a script tag. + - **Tip**: We highly recommend writing the code in an external JavaScript file and linking it to the HTML file. This game is played entirely from the console, so don't worry about writing anything else in the HTML file. +3. Your game is going to play against the computer, so begin writing a new function called `getComputerChoice` that will randomly return either `"Rock"`, `"Paper"`, or `"Scissors"`. We'll use this function to make the computer play. + - **Tip**: Use the console to make sure this returns the expected output before moving to the next step! +4. Write a new function called `playRound` that plays a single round of Rock Paper Scissors. This `playRound` function should have two parameters: `playerSelection` and `computerSelection`, both taking string arguments. Then, return a string that declares the winner of the round, like so: `"You Lose! Paper beats Rock"` + * Make sure your `playerSelection` parameter is case-insensitive so that users can input `rock`, `ROCK`, `RocK`, or any other variation. + - **Important note:** you want to `return` the results of `playRound` call, *not* `console.log` them. You're going to use what you `return` later on, so let's test this function by using console.log to see the results: + + ~~~javascript + function playRound(playerSelection, computerSelection) { + // your code here! + } - const playerSelection = "rock"; - const computerSelection = getComputerChoice(); - console.log(playRound(playerSelection, computerSelection)); - ~~~ - -6. Write a NEW function called `game()`. Use the previous function _inside_ of this one to play a 5 round game that keeps score and reports a winner or loser at the end. - * You have not officially learned how to "loop" over code to repeat function calls... if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don't worry! Just call your `playRound` function 5 times in a row. Loops are covered in the next lesson. - * At this point you should be using `console.log()` to display the results of each round and the winner at the end. - * Use `prompt()` to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) + const playerSelection = "rock"; + const computerSelection = getComputerChoice(); + console.log(playRound(playerSelection, computerSelection)); + ~~~ + +5. Write a new function called `game` that plays a 5 round game, keeps the game's score, and reports a winner or loser at the end. Use the previous function *inside* this `game` function. + * You have not officially learned how to "loop" over code to repeat function calls... If you already know about loops from somewhere else or feel like learning more, feel free to use them. If not, don't worry! Just call your `playRound` function 5 times in a row. In the next lesson, we will cover loops. + * At this point, you should be using `console.log` to display the results of each round and the winner at the end. + * Use the `prompt` function to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) * Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful. - * Feel free to create more "helper" functions if you think it would be useful. + * Feel free to create more "helper" functions if you think they would be useful.
From c45148199ecfbe036a3bcefe3a74d5032840111c Mon Sep 17 00:00:00 2001 From: Cake Date: Fri, 4 Aug 2023 22:46:52 +0200 Subject: [PATCH 02/20] Rewrite - first draft --- .../project_rock_paper_scissors.md | 74 +++++++++++-------- 1 file changed, 43 insertions(+), 31 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 8af7f35be6f..f4d6afffd23 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,46 +1,58 @@ ### Introduction -In this project, we'll create a simple implementation of the classic grade-school game "rock paper scissors". If you're unfamiliar with this game, check out this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). +For this project, you'll create a console-only version of the grade-school game: Rock Paper Scissors. To learn more—or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). +
+

Student solutions

+Some students' solutions below include buttons, text, and other elements—those elements form what is known as a Graphical User Interface (GUI). You'll add those elements—a GUI, in a later lesson. So remember to push your code to GitHub. +
-We'll start by playing the game entirely from the browser console. Later on, **we'll revisit this project to add a Graphical User Interface (GUI) with buttons and text**. So don't forget to save the code on GitHub! Some student solutions below might already have a GUI, but we'll cover that in a later lesson. Let's get started with a few quick exercises before we start the project! - - -### Quick exercises before starting +### Quick exercise before starting 1. Identify three ways to include JavaScript in a page. -2. Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console. +2. Check if you are including the JavaScript correctly: + - Write `console.log("Hello World");` in JavaScript. + - Check if `console.log("Hello World");` logs in the browser's console. -Before we dive into the project, remember that this is your first JavaScript program built from scratch. So, don't forget the previous lesson on problem-solving. Plan your solution before writing any code and test each piece as you build to ensure it works before moving on to the next step! +Before we dive into the project—and since this is your first JavaScript program built from scratch, remember the [previous lesson on problem-solving](https://www.theodinproject.com/lessons/foundations-problem-solving). Plan your solution before writing the code—then write the code—and lastly, ensure the code works before moving to the next step. ### Assignment
-Don't forget to commit early & often! You can [reference the Commit Message lesson here](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)! +Remember to commit early and often! To refresh your memory, refer to the lesson about [commit messages](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). 1. Start a new Git repository for your project. -2. Create a blank HTML document with a script tag. - - **Tip**: We highly recommend writing the code in an external JavaScript file and linking it to the HTML file. This game is played entirely from the console, so don't worry about writing anything else in the HTML file. -3. Your game is going to play against the computer, so begin writing a new function called `getComputerChoice` that will randomly return either `"Rock"`, `"Paper"`, or `"Scissors"`. We'll use this function to make the computer play. - - **Tip**: Use the console to make sure this returns the expected output before moving to the next step! -4. Write a new function called `playRound` that plays a single round of Rock Paper Scissors. This `playRound` function should have two parameters: `playerSelection` and `computerSelection`, both taking string arguments. Then, return a string that declares the winner of the round, like so: `"You Lose! Paper beats Rock"` - * Make sure your `playerSelection` parameter is case-insensitive so that users can input `rock`, `ROCK`, `RocK`, or any other variation. - - **Important note:** you want to `return` the results of `playRound` call, *not* `console.log` them. You're going to use what you `return` later on, so let's test this function by using console.log to see the results: - - ~~~javascript - function playRound(playerSelection, computerSelection) { - // your code here! - } +1. Create a blank HTML document with a script tag. +
+ We recommend writing the code in an external JavaScript file and linking it to the HTML file. You play this game entirely on the console, so don't worry about writing anything else in the HTML file. +
+1. Your game plays against the computer—you need a function that returns the computer choice: + 1. Create a new function called `getComputerChoice`. + 1. Make `getComputerChoice` *randomly* `return` one of the following string values: `"Rock"`, `"Paper"` or `"Scissors"`. +
+ Remember to test what your function returns with the browser dev tools or by using console.log. +
+1. Your game plays turn by turn—you need a function that takes the human and computer choices—then returns the round winner: + 1. Create a new function called `playRound`. + 1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to take the human and computer choices as arguments. + 1. Make `playRound` `return` a string value that represents the winner of the round, such as: `"You Lose! Paper beats Rock"`. + + ~~~javascript + function playRound(playerSelection, computerSelection) { + // your code here! + } - const playerSelection = "rock"; - const computerSelection = getComputerChoice(); - console.log(playRound(playerSelection, computerSelection)); - ~~~ - -5. Write a new function called `game` that plays a 5 round game, keeps the game's score, and reports a winner or loser at the end. Use the previous function *inside* this `game` function. - * You have not officially learned how to "loop" over code to repeat function calls... If you already know about loops from somewhere else or feel like learning more, feel free to use them. If not, don't worry! Just call your `playRound` function 5 times in a row. In the next lesson, we will cover loops. - * At this point, you should be using `console.log` to display the results of each round and the winner at the end. - * Use the `prompt` function to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) - * Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful. - * Feel free to create more "helper" functions if you think they would be useful. + const playerSelection = "rock"; + const computerSelection = getComputerChoice(); + console.log(playRound(playerSelection, computerSelection)); + ~~~ + +1. Finally, your game plays for 5 rounds, and then report the winner or loser after those 5 rounds—you need a function that represents the entire game: + 1. Create a new function called `game`. + 1. Get the human player choice using `prompt` function. To learn more about `prompt`, refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) + 1. Put the previous function—`playRound`—inside `game`. + 1. Play 5 rounds by calling `playRound` 5 times in a row. +
+ If you already know about loops or feel like learning more, feel free to use them. If not, don't worry! We cover loops in the next lesson. +
From a96cbf28647b09241a361bea8bf5f09eeefa87d7 Mon Sep 17 00:00:00 2001 From: Cake Date: Sat, 5 Aug 2023 21:46:38 +0200 Subject: [PATCH 03/20] Rewrite - second draft --- .../project_rock_paper_scissors.md | 44 +++++++++---------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index f4d6afffd23..b39ce7d104f 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,44 +1,42 @@ ### Introduction -For this project, you'll create a console-only version of the grade-school game: Rock Paper Scissors. To learn more—or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). +For this project, you'll create a console-only version of the grade-school game: **Rock Paper Scissors**. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +

Student solutions

-Some students' solutions below include buttons, text, and other elements—those elements form what is known as a Graphical User Interface (GUI). You'll add those elements—a GUI, in a later lesson. So remember to push your code to GitHub. -
+Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements—the GUI, in a later lesson. So remember to push your code to GitHub. + ### Quick exercise before starting - 1. Identify three ways to include JavaScript in a page. -2. Check if you are including the JavaScript correctly: +2. Check if the page includes JavaScript: - Write `console.log("Hello World");` in JavaScript. - Check if `console.log("Hello World");` logs in the browser's console. -Before we dive into the project—and since this is your first JavaScript program built from scratch, remember the [previous lesson on problem-solving](https://www.theodinproject.com/lessons/foundations-problem-solving). Plan your solution before writing the code—then write the code—and lastly, ensure the code works before moving to the next step. +### Problem solving approach + +Remember the [previous lesson on problem solving](https://www.theodinproject.com/lessons/foundations-problem-solving) before diving into the project. Plan your solution—write the code—and then ensure the code works. ### Assignment
-Remember to commit early and often! To refresh your memory, refer to the lesson about [commit messages](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). +Remember to commit early and often! To refresh your memory, check the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). -1. Start a new Git repository for your project. +1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. -
- We recommend writing the code in an external JavaScript file and linking it to the HTML file. You play this game entirely on the console, so don't worry about writing anything else in the HTML file. -
-1. Your game plays against the computer—you need a function that returns the computer choice: + 1. We recommend writing the code in an external JavaScript file and linking it to the HTML file. You play this game entirely on the console, so don't worry about writing anything else in the HTML file. +1. Your game plays against the computer—create a function to `return` the computer's choice: 1. Create a new function called `getComputerChoice`. 1. Make `getComputerChoice` *randomly* `return` one of the following string values: `"Rock"`, `"Paper"` or `"Scissors"`. -
- Remember to test what your function returns with the browser dev tools or by using console.log. -
-1. Your game plays turn by turn—you need a function that takes the human and computer choices—then returns the round winner: + 1. Remember to test what your function returns with [browser's developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) or `console.log`. +1. Your game plays turn by turn—create a function to take the human and computer choices, then `return` the round winner: 1. Create a new function called `playRound`. 1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to take the human and computer choices as arguments. - 1. Make `playRound` `return` a string value that represents the winner of the round, such as: `"You Lose! Paper beats Rock"`. + 1. Make `playRound` `return` a string value representing the round winner, such as: `"You Lose! Paper beats Rock"`. ~~~javascript function playRound(playerSelection, computerSelection) { - // your code here! + // your code here! } const playerSelection = "rock"; @@ -46,13 +44,11 @@ Remember to commit early and often! To refresh your memory, refer to the lesson console.log(playRound(playerSelection, computerSelection)); ~~~ -1. Finally, your game plays for 5 rounds, and then report the winner or loser after those 5 rounds—you need a function that represents the entire game: +1. Your game plays for 5 rounds, and reports the winner or loser after the 5 rounds—create a function to represent the game: 1. Create a new function called `game`. - 1. Get the human player choice using `prompt` function. To learn more about `prompt`, refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) + 1. Get the human player choice using `prompt` function. To learn about `prompt`, check the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) 1. Put the previous function—`playRound`—inside `game`. - 1. Play 5 rounds by calling `playRound` 5 times in a row. -
- If you already know about loops or feel like learning more, feel free to use them. If not, don't worry! We cover loops in the next lesson. -
+ 1. Play 5 rounds by calling `playRound` 5 times. + 1. If you know about loops, use them. If not, don't worry! We cover loops in the next lesson.
From a17396243adcef91c049c7f22fcd4a29bb794a18 Mon Sep 17 00:00:00 2001 From: Fabio <36206278+cakegod@users.noreply.github.com> Date: Sun, 6 Aug 2023 01:11:13 +0200 Subject: [PATCH 04/20] Changes from Manon draft v2 review Co-authored-by: Manon <81025586+ManonLef@users.noreply.github.com> --- .../project_rock_paper_scissors.md | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index b39ce7d104f..163d2c4d85e 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,21 +1,22 @@ ### Introduction -For this project, you'll create a console-only version of the grade-school game: **Rock Paper Scissors**. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +For this project, you'll create the grade-school game: **Rock Paper Scissors** which will be played entirely in the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)

Student solutions

-Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements—the GUI, in a later lesson. So remember to push your code to GitHub. +Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements, the GUI, in a later lesson. So remember to push your code to GitHub.
### Quick exercise before starting + 1. Identify three ways to include JavaScript in a page. 2. Check if the page includes JavaScript: - Write `console.log("Hello World");` in JavaScript. - - Check if `console.log("Hello World");` logs in the browser's console. + - Check if "Hello World" is logged in the browser console once you open your webpage. ### Problem solving approach -Remember the [previous lesson on problem solving](https://www.theodinproject.com/lessons/foundations-problem-solving) before diving into the project. Plan your solution—write the code—and then ensure the code works. +Since this is your first JavaScript program built from scratch, remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). Before diving into this project, first plan or pseudocode your solution, then write the code, then ensure the code works. ### Assignment @@ -24,15 +25,17 @@ Remember to commit early and often! To refresh your memory, check the [commit me 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. - 1. We recommend writing the code in an external JavaScript file and linking it to the HTML file. You play this game entirely on the console, so don't worry about writing anything else in the HTML file. -1. Your game plays against the computer—create a function to `return` the computer's choice: - 1. Create a new function called `getComputerChoice`. - 1. Make `getComputerChoice` *randomly* `return` one of the following string values: `"Rock"`, `"Paper"` or `"Scissors"`. - 1. Remember to test what your function returns with [browser's developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) or `console.log`. -1. Your game plays turn by turn—create a function to take the human and computer choices, then `return` the round winner: - 1. Create a new function called `playRound`. - 1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to take the human and computer choices as arguments. - 1. Make `playRound` `return` a string value representing the round winner, such as: `"You Lose! Paper beats Rock"`. + - It is best practice to link to an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in the HTML file for this project. +1. Your game plays against the computer. Create a function `getComputerChoice` that will randomly `return` either 'Rock', 'Paper' or 'Scissors'. + - Create a new function `getComputerChoice`. + - Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". + - Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before you move on to the next step. +1. Your game plays turn by turn. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement. + - Create a new function called `playRound`. + - Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments. + - Make your function's `playerSelection` parameter case-insensitive (so users can input "rock", "ROCK", "RocK" or any other variation). + - Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". + - example code: ~~~javascript function playRound(playerSelection, computerSelection) { @@ -44,11 +47,12 @@ Remember to commit early and often! To refresh your memory, check the [commit me console.log(playRound(playerSelection, computerSelection)); ~~~ -1. Your game plays for 5 rounds, and reports the winner or loser after the 5 rounds—create a function to represent the game: - 1. Create a new function called `game`. - 1. Get the human player choice using `prompt` function. To learn about `prompt`, check the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) - 1. Put the previous function—`playRound`—inside `game`. - 1. Play 5 rounds by calling `playRound` 5 times. - 1. If you know about loops, use them. If not, don't worry! We cover loops in the next lesson. +1. Your game plays for 5 rounds. Write a function called `game` which will keep score for 5 rounds, utilizing your 'playRound' function, before it declares a winner: + - Create a new function called `game`. + - Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) if you need to learn more about it. + - Put the previous `playRound` function inside `game`. + - Play 5 rounds by calling `playRound` 5 times. + - Re-work your previous functions or create more helper functions if you feel the need to. Specifically, you might want to change the return values to something more useful. + - If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson. From cb52cb7dfe3587a85ae6d8482f0c259e99f174c3 Mon Sep 17 00:00:00 2001 From: Cake Date: Wed, 9 Aug 2023 22:09:36 +0200 Subject: [PATCH 05/20] Small refinements --- .../project_rock_paper_scissors.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 163d2c4d85e..8c365edaab9 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,6 +1,6 @@ ### Introduction -For this project, you'll create the grade-school game: **Rock Paper Scissors** which will be played entirely in the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +For this project, you'll create the grade-school game: **Rock Paper Scissors**, which will be played entirely on the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)

Student solutions

@@ -16,7 +16,10 @@ Some students' solutions below include buttons, text, and other elements. Those ### Problem solving approach -Since this is your first JavaScript program built from scratch, remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). Before diving into this project, first plan or pseudocode your solution, then write the code, then ensure the code works. +Remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) since this is your first JavaScript program built from scratch. Before diving into this project, on each step of the project: +1. Plan or pseudocode your solution. +2. Write the code. +3. Ensure the code works. ### Assignment @@ -25,8 +28,8 @@ Remember to commit early and often! To refresh your memory, check the [commit me 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. - - It is best practice to link to an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in the HTML file for this project. -1. Your game plays against the computer. Create a function `getComputerChoice` that will randomly `return` either 'Rock', 'Paper' or 'Scissors'. + - It is best practice to link to an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in this project's HTML file. +1. Your game plays against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors'. - Create a new function `getComputerChoice`. - Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". - Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before you move on to the next step. @@ -47,12 +50,12 @@ Remember to commit early and often! To refresh your memory, check the [commit me console.log(playRound(playerSelection, computerSelection)); ~~~ -1. Your game plays for 5 rounds. Write a function called `game` which will keep score for 5 rounds, utilizing your 'playRound' function, before it declares a winner: +1. Your game plays for 5 rounds. Write a function called `game` which keeps score for 5 rounds, utilizing your 'playRound' function, before it declares a winner: - Create a new function called `game`. - - Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) if you need to learn more about it. + - Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. - Put the previous `playRound` function inside `game`. - Play 5 rounds by calling `playRound` 5 times. - - Re-work your previous functions or create more helper functions if you feel the need to. Specifically, you might want to change the return values to something more useful. + - Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. - If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson.
From b4f3b3f3554229f0cbad5d0a51a8ff6bf519bf94 Mon Sep 17 00:00:00 2001 From: Cake Date: Thu, 10 Aug 2023 08:24:39 +0200 Subject: [PATCH 06/20] Structure assignment section --- .../project_rock_paper_scissors.md | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 8c365edaab9..6e05f981697 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -3,15 +3,14 @@ For this project, you'll create the grade-school game: **Rock Paper Scissors**, which will be played entirely on the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)
-

Student solutions

Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements, the GUI, in a later lesson. So remember to push your code to GitHub.
### Quick exercise before starting -1. Identify three ways to include JavaScript in a page. -2. Check if the page includes JavaScript: - - Write `console.log("Hello World");` in JavaScript. +1. Identify three ways to include JavaScript in a webpage. +2. Check if the webpage includes JavaScript: + - Write `console.log("Hello World")` in JavaScript. - Check if "Hello World" is logged in the browser console once you open your webpage. ### Problem solving approach @@ -26,36 +25,52 @@ Remember the [previous wise words from the problem-solving lesson](https://www.t
Remember to commit early and often! To refresh your memory, check the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). +#### Step 1: initial structure + 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. - - It is best practice to link to an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in this project's HTML file. -1. Your game plays against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors'. - - Create a new function `getComputerChoice`. - - Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". - - Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before you move on to the next step. -1. Your game plays turn by turn. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement. - - Create a new function called `playRound`. - - Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments. - - Make your function's `playerSelection` parameter case-insensitive (so users can input "rock", "ROCK", "RocK" or any other variation). - - Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". - - example code: - - ~~~javascript - function playRound(playerSelection, computerSelection) { - // your code here! - } + +It's best practice to link an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in this project's HTML file. + +#### Step 2: get computer choice function + +Your game plays against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': + +1. Create a new function `getComputerChoice`. +1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". +1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. + +#### Step 3: play round function + +Your game plays turn by turn. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement: + +1. Create a new function called `playRound`. +1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments. +1. Make your function's `playerSelection` parameter case1.insensitive (so users can input "rock", "ROCK", "RocK" or any other variation). +1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". + +Example code: + +~~~javascript +function playRound(playerSelection, computerSelection) { +// your code here! +} - const playerSelection = "rock"; - const computerSelection = getComputerChoice(); - console.log(playRound(playerSelection, computerSelection)); - ~~~ - -1. Your game plays for 5 rounds. Write a function called `game` which keeps score for 5 rounds, utilizing your 'playRound' function, before it declares a winner: - - Create a new function called `game`. - - Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. - - Put the previous `playRound` function inside `game`. - - Play 5 rounds by calling `playRound` 5 times. - - Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. - - If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson. +const playerSelection = "rock"; +const computerSelection = getComputerChoice(); +console.log(playRound(playerSelection, computerSelection)); +~~~ + +#### Step 4: game function +Your game plays for 5 rounds. Write a function called `game` which keeps score for 5 rounds, utilizing your `playRound` function, before declaring a winner: + +1. Create a new function called `game`. +1. Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. +1. Put the previous `playRound` function inside `game`. +1. Play 5 rounds by calling `playRound` 5 times. + +Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. + +If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson.
From fd861bae64432ac5410cc550477bcd531fa884a1 Mon Sep 17 00:00:00 2001 From: Cake Date: Sat, 14 Oct 2023 16:50:56 +0200 Subject: [PATCH 07/20] Add math random hint --- .../project_rock_paper_scissors.md | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 6e05f981697..f0f686c0596 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,6 +1,6 @@ ### Introduction -For this project, you'll create the grade-school game: **Rock Paper Scissors**, which will be played entirely on the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article about the rock paper scissors game](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide about rock paper scissors.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +For this project, you'll create the game **Rock Paper Scissors**. This game will be played entirely on the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)
Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements, the GUI, in a later lesson. So remember to push your code to GitHub. @@ -15,8 +15,9 @@ Some students' solutions below include buttons, text, and other elements. Those ### Problem solving approach -Remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) since this is your first JavaScript program built from scratch. Before diving into this project, on each step of the project: -1. Plan or pseudocode your solution. +Remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) since this is your first JavaScript program built from scratch. Before diving into this project, on each step of the project: + +1. Plan or pseudocode your solution. 2. Write the code. 3. Ensure the code works. @@ -30,23 +31,26 @@ Remember to commit early and often! To refresh your memory, check the [commit me 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. -It's best practice to link an external JavaScript file inside this script tag. You play this game entirely on the console, so don't worry about writing anything else in this project's HTML file. +It's best practice to link an external JavaScript file inside this script tag. Using an external JavaScript file will keep your HTML file clean and organized. + +You don't need to write any other code in the HTML file. This game is entirely played on the console. #### Step 2: get computer choice function -Your game plays against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': +Your game will be played against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': 1. Create a new function `getComputerChoice`. -1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". +1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". + 1. **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how to use this to pick one of the multiple choices conditionally. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. #### Step 3: play round function -Your game plays turn by turn. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement: +Your game will be played round by round. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement: 1. Create a new function called `playRound`. 1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments. -1. Make your function's `playerSelection` parameter case1.insensitive (so users can input "rock", "ROCK", "RocK" or any other variation). +1. Make your function's `playerSelection` parameter case-insensitive. Players should be able to input "rock", "ROCK", "RocK" or other variations. 1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". Example code: @@ -55,22 +59,22 @@ Example code: function playRound(playerSelection, computerSelection) { // your code here! } - + const playerSelection = "rock"; const computerSelection = getComputerChoice(); console.log(playRound(playerSelection, computerSelection)); ~~~ #### Step 4: game function -Your game plays for 5 rounds. Write a function called `game` which keeps score for 5 rounds, utilizing your `playRound` function, before declaring a winner: +Your game will play 5 rounds. Write a function called `game` which plays for 5 rounds using `playRound`, keeps score, and declares a winner at the end: 1. Create a new function called `game`. -1. Get the human player choice using the `prompt` method. Read [this MDN article about prompts](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. +1. Get the human player choice using the `prompt` method. Read [this MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. 1. Put the previous `playRound` function inside `game`. 1. Play 5 rounds by calling `playRound` 5 times. Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. -If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson. +If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson.
From bb1e4c1cd2157ade5484f3d3b32e0ba95089e958 Mon Sep 17 00:00:00 2001 From: Cake Date: Wed, 25 Oct 2023 15:07:44 +0200 Subject: [PATCH 08/20] add hint for multi round playRound --- .../javascript_basics/project_rock_paper_scissors.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index f0f686c0596..30bc9c8260d 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -39,29 +39,30 @@ You don't need to write any other code in the HTML file. This game is entirely p Your game will be played against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': -1. Create a new function `getComputerChoice`. +1. Create a new function called `getComputerChoice`. 1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". 1. **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how to use this to pick one of the multiple choices conditionally. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. #### Step 3: play round function -Your game will be played round by round. Write a function named `playRound`, which takes the `playerSelection` and `computerSelection` to play a single round, and returns a winner announcement: +Your game will be played round by round. Write a function named `playRound`, which takes the human and computer player choices as arguments to play a single round, and returns a winner announcement: 1. Create a new function called `playRound`. -1. Define two parameters on `playRound`: `playerSelection` and `computerSelection`. Use those two parameters to pass the human and computer choices as arguments. +1. Define two parameters on `playRound`: `playerChoice` and `computerChoice`. Use those two parameters to take the human and computer choices as arguments. 1. Make your function's `playerSelection` parameter case-insensitive. Players should be able to input "rock", "ROCK", "RocK" or other variations. 1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". Example code: ~~~javascript -function playRound(playerSelection, computerSelection) { +function playRound(playerChoice, computerChoice) { // your code here! } const playerSelection = "rock"; const computerSelection = getComputerChoice(); + console.log(playRound(playerSelection, computerSelection)); ~~~ @@ -72,6 +73,7 @@ Your game will play 5 rounds. Write a function called `game` which plays for 5 r 1. Get the human player choice using the `prompt` method. Read [this MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. 1. Put the previous `playRound` function inside `game`. 1. Play 5 rounds by calling `playRound` 5 times. + 1. **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. From 74d4fcf069b393595df376ce46facc7eed58a56d Mon Sep 17 00:00:00 2001 From: Cake Date: Wed, 25 Oct 2023 15:46:14 +0200 Subject: [PATCH 09/20] Improve wording of most phrases --- .../project_rock_paper_scissors.md | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 30bc9c8260d..a4ffef671ac 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,9 +1,9 @@ ### Introduction -For this project, you'll create the game **Rock Paper Scissors**. This game will be played entirely on the console. To learn more, or if you're unfamiliar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +For this project, you will create the game **Rock Paper Scissors**. This game will be played entirely on the console. To learn more, or if you're not familiar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)
-Some students' solutions below include buttons, text, and other elements. Those elements form what is known as a Graphical User Interface (GUI). You'll add those elements, the GUI, in a later lesson. So remember to push your code to GitHub. +Some of the student solutions below contain buttons, text, and other elements. These elements make up what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub.
### Quick exercise before starting @@ -14,41 +14,40 @@ Some students' solutions below include buttons, text, and other elements. Those - Check if "Hello World" is logged in the browser console once you open your webpage. ### Problem solving approach - -Remember the [previous wise words from the problem-solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) since this is your first JavaScript program built from scratch. Before diving into this project, on each step of the project: +Remember the [previous wise words from the Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: 1. Plan or pseudocode your solution. 2. Write the code. -3. Ensure the code works. +3. Test your code to make sure it works. ### Assignment
-Remember to commit early and often! To refresh your memory, check the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). +Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). #### Step 1: initial structure 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. -It's best practice to link an external JavaScript file inside this script tag. Using an external JavaScript file will keep your HTML file clean and organized. +It's best practice to link to an external JavaScript file inside this script tag. Using an external JavaScript file keeps your HTML file clean and organized. -You don't need to write any other code in the HTML file. This game is entirely played on the console. +You don't have to write additional code in the HTML file. This game is played entirely on the console. #### Step 2: get computer choice function -Your game will be played against the computer. Create a function `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': +Your game will be played against the computer. Create a function named `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': -1. Create a new function called `getComputerChoice`. +1. Create a new function named `getComputerChoice`. 1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". - 1. **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how to use this to pick one of the multiple choices conditionally. + - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. #### Step 3: play round function -Your game will be played round by round. Write a function named `playRound`, which takes the human and computer player choices as arguments to play a single round, and returns a winner announcement: +Your game will be played round by round. Write a function named `playRound` that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement: -1. Create a new function called `playRound`. +1. Create a new function named `playRound`. 1. Define two parameters on `playRound`: `playerChoice` and `computerChoice`. Use those two parameters to take the human and computer choices as arguments. 1. Make your function's `playerSelection` parameter case-insensitive. Players should be able to input "rock", "ROCK", "RocK" or other variations. 1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". @@ -67,16 +66,16 @@ console.log(playRound(playerSelection, computerSelection)); ~~~ #### Step 4: game function -Your game will play 5 rounds. Write a function called `game` which plays for 5 rounds using `playRound`, keeps score, and declares a winner at the end: +Your game will play 5 rounds. Write a function named `game` that uses `playRound` to play 5 rounds, keeps score, and declares a winner at the end: -1. Create a new function called `game`. +1. Create a new function named `game`. 1. Get the human player choice using the `prompt` method. Read [this MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. 1. Put the previous `playRound` function inside `game`. 1. Play 5 rounds by calling `playRound` 5 times. - 1. **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. + - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. -Re-work your previous functions or create more helper functions if the need to. Specifically, you might want to change the return values to something more useful. +Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful. -If you already know about loops, you can use them. If not, don't worry! We cover loops in the next lesson. +If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson.
From d565ca0d234a1f0a0676f93be04885b30909485f Mon Sep 17 00:00:00 2001 From: Fabio <36206278+cakegod@users.noreply.github.com> Date: Mon, 4 Mar 2024 19:04:33 +0100 Subject: [PATCH 10/20] Apply suggestions from ravenco code review Co-authored-by: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> --- foundations/javascript_basics/project_rock_paper_scissors.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index a4ffef671ac..8b57725601a 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -36,7 +36,7 @@ You don't have to write additional code in the HTML file. This game is played en #### Step 2: get computer choice function -Your game will be played against the computer. Create a function named `getComputerChoice` that randomly returns 'Rock', 'Paper' or 'Scissors': +Your game will be played against the computer. You will make a function that randomly returns 'Rock', 'Paper' or 'Scissors': 1. Create a new function named `getComputerChoice`. 1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". @@ -45,7 +45,7 @@ Your game will be played against the computer. Create a function named `getCompu #### Step 3: play round function -Your game will be played round by round. Write a function named `playRound` that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement: +Your game will be played round by round. You will make a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement: 1. Create a new function named `playRound`. 1. Define two parameters on `playRound`: `playerChoice` and `computerChoice`. Use those two parameters to take the human and computer choices as arguments. From b2b704ea4eead7f83532aee38521a27b2f40be34 Mon Sep 17 00:00:00 2001 From: Cake Date: Mon, 4 Mar 2024 19:30:48 +0100 Subject: [PATCH 11/20] fix markdown lint issues --- .../project_rock_paper_scissors.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index a3610108897..e77c351657c 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -9,16 +9,17 @@ Some of the student solutions below contain buttons, text, and other elements. T ### Quick exercise before starting 1. Identify three ways to include JavaScript in a webpage. -2. Check if the webpage includes JavaScript: +1. Check if the webpage includes JavaScript: - Write `console.log("Hello World")` in JavaScript. - Check if "Hello World" is logged in the browser console once you open your webpage. ### Problem solving approach + Remember the [previous wise words from the Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: 1. Plan or pseudocode your solution. -2. Write the code. -3. Test your code to make sure it works. +1. Write the code. +1. Test your code to make sure it works. ### Assignment @@ -54,7 +55,7 @@ Your game will be played round by round. You will make a function that takes the Example code: -~~~javascript +```javascript function playRound(playerChoice, computerChoice) { // your code here! } @@ -63,13 +64,14 @@ const playerSelection = "rock"; const computerSelection = getComputerChoice(); console.log(playRound(playerSelection, computerSelection)); -~~~ +``` #### Step 4: game function + Your game will play 5 rounds. Write a function named `game` that uses `playRound` to play 5 rounds, keeps score, and declares a winner at the end: 1. Create a new function named `game`. -1. Get the human player choice using the `prompt` method. Read [this MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. +1. Get the human player choice using the `prompt` method. Read this [MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. 1. Put the previous `playRound` function inside `game`. 1. Play 5 rounds by calling `playRound` 5 times. - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. From 4f08dbc302dd52831074a78f01d7a382696ff0bd Mon Sep 17 00:00:00 2001 From: Cake Date: Mon, 4 Mar 2024 19:41:28 +0100 Subject: [PATCH 12/20] add takina suggestion --- foundations/javascript_basics/project_rock_paper_scissors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index e77c351657c..d4f0d03ace4 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -33,7 +33,7 @@ Remember to commit early and often! To refresh your memory, check out the [commi It's best practice to link to an external JavaScript file inside this script tag. Using an external JavaScript file keeps your HTML file clean and organized. -You don't have to write additional code in the HTML file. This game is played entirely on the console. +You don't have to write additional code in the HTML file. This game is played entirely via the console. #### Step 2: get computer choice function From df489e6a0c5d533f524a35e8e99edb6ec1fd5f3b Mon Sep 17 00:00:00 2001 From: Cake Date: Mon, 4 Mar 2024 21:38:15 +0100 Subject: [PATCH 13/20] changes some phrases --- .../javascript_basics/project_rock_paper_scissors.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index d4f0d03ace4..b91b935a927 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -3,7 +3,7 @@ For this project, you will create the game **Rock Paper Scissors**. This game will be played entirely on the console. To learn more, or if you're not familiar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors)
-Some of the student solutions below contain buttons, text, and other elements. These elements make up what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub. +Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI) You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub.
### Quick exercise before starting @@ -40,7 +40,7 @@ You don't have to write additional code in the HTML file. This game is played en Your game will be played against the computer. You will make a function that randomly returns 'Rock', 'Paper' or 'Scissors': 1. Create a new function named `getComputerChoice`. -1. Write the code to let `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". +1. Write the code so that `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. @@ -50,14 +50,14 @@ Your game will be played round by round. You will make a function that takes the 1. Create a new function named `playRound`. 1. Define two parameters on `playRound`: `playerChoice` and `computerChoice`. Use those two parameters to take the human and computer choices as arguments. -1. Make your function's `playerSelection` parameter case-insensitive. Players should be able to input "rock", "ROCK", "RocK" or other variations. +1. Make your function's `playerSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations. 1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". Example code: ```javascript function playRound(playerChoice, computerChoice) { -// your code here! + // your code here! } const playerSelection = "rock"; From 39b037b8367988f1197351665d1474cc701f9f31 Mon Sep 17 00:00:00 2001 From: Fabio <36206278+cakegod@users.noreply.github.com> Date: Fri, 22 Mar 2024 21:07:44 +0100 Subject: [PATCH 14/20] Apply suggestions from code review Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com> --- .../project_rock_paper_scissors.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index b91b935a927..eeaaf7bb8dd 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -1,9 +1,9 @@ ### Introduction -For this project, you will create the game **Rock Paper Scissors**. This game will be played entirely on the console. To learn more, or if you're not familiar with the game, read this [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or this [detailed step-by-step guide.](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) +For this project, you will create the game [Rock Paper Scissors](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). This game will be played entirely in the console.
-Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI) You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub. +Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub.
### Quick exercise before starting @@ -15,7 +15,7 @@ Some of the student solutions below contain buttons, text, and other elements. T ### Problem solving approach -Remember the [previous wise words from the Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: +Remember the previous wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: 1. Plan or pseudocode your solution. 1. Write the code. @@ -26,7 +26,7 @@ Remember the [previous wise words from the Problem Solving lesson](https://www.t
Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). -#### Step 1: initial structure +#### Step 1: Initial structure 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. @@ -35,7 +35,7 @@ It's best practice to link to an external JavaScript file inside this script tag You don't have to write additional code in the HTML file. This game is played entirely via the console. -#### Step 2: get computer choice function +#### Step 2: Get computer choice function Your game will be played against the computer. You will make a function that randomly returns 'Rock', 'Paper' or 'Scissors': @@ -44,14 +44,14 @@ Your game will be played against the computer. You will make a function that ran - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. -#### Step 3: play round function +#### Step 3: Play round function Your game will be played round by round. You will make a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement: 1. Create a new function named `playRound`. -1. Define two parameters on `playRound`: `playerChoice` and `computerChoice`. Use those two parameters to take the human and computer choices as arguments. +1. Define two parameters for `playRound`: `playerChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments. 1. Make your function's `playerSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations. -1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You Lose! Paper beats Rock". +1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You lose! Paper beats Rock". Example code: @@ -66,13 +66,13 @@ const computerSelection = getComputerChoice(); console.log(playRound(playerSelection, computerSelection)); ``` -#### Step 4: game function +#### Step 4: Play game function -Your game will play 5 rounds. Write a function named `game` that uses `playRound` to play 5 rounds, keeps score, and declares a winner at the end: +Your game will play 5 rounds. Write a function named `playGame` that uses `playRound` to play 5 rounds, keeps score, and declares a winner at the end: -1. Create a new function named `game`. -1. Get the human player choice using the `prompt` method. Read this [MDN article about prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. -1. Put the previous `playRound` function inside `game`. +1. Create a new function named `playGame`. +1. Get the human player choice using the `prompt` method. Read this [MDN article about the prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. +1. Put the previous `playRound` function inside `playGame`. 1. Play 5 rounds by calling `playRound` 5 times. - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. From c0ab513bf956527d0dd6072e7caa2e67eb5e33de Mon Sep 17 00:00:00 2001 From: Cake Date: Fri, 22 Mar 2024 21:16:14 +0100 Subject: [PATCH 15/20] apply remaining suggestion Co-authored-by: MaoShizhong --- .../javascript_basics/project_rock_paper_scissors.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index eeaaf7bb8dd..b173f710480 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -6,13 +6,6 @@ For this project, you will create the game [Rock Paper Scissors](https://www.wik Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub.
-### Quick exercise before starting - -1. Identify three ways to include JavaScript in a webpage. -1. Check if the webpage includes JavaScript: - - Write `console.log("Hello World")` in JavaScript. - - Check if "Hello World" is logged in the browser console once you open your webpage. - ### Problem solving approach Remember the previous wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: @@ -30,6 +23,9 @@ Remember to commit early and often! To refresh your memory, check out the [commi 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. +1. Check if the webpage includes JavaScript: + - Write `console.log("Hello World")` in JavaScript. + - Check if "Hello World" is logged in the browser console once you open your webpage. It's best practice to link to an external JavaScript file inside this script tag. Using an external JavaScript file keeps your HTML file clean and organized. From c4ab58d793c91fe0a782a14400e2917d55c0980f Mon Sep 17 00:00:00 2001 From: Fabio <36206278+cakegod@users.noreply.github.com> Date: Mon, 25 Mar 2024 18:35:40 +0100 Subject: [PATCH 16/20] Apply suggestions from code review Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../javascript_basics/project_rock_paper_scissors.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index b173f710480..dfc1f17169c 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -8,7 +8,7 @@ Some of the student solutions below contain buttons, text, and other elements. T ### Problem solving approach -Remember the previous wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving) because this is your first JavaScript program built from scratch. Before you start this project, follow these steps for each step of the project: +Since this is the first JavaScript project being built from scratch, it's important to remember the wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). Before you start this project, follow these steps for each step of the project: 1. Plan or pseudocode your solution. 1. Write the code. @@ -33,16 +33,16 @@ You don't have to write additional code in the HTML file. This game is played en #### Step 2: Get computer choice function -Your game will be played against the computer. You will make a function that randomly returns 'Rock', 'Paper' or 'Scissors': +Your game will be played against the computer. You will write a function that randomly returns "Rock", "Paper" or "Scissors". 1. Create a new function named `getComputerChoice`. -1. Write the code so that `getComputerChoice` randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". +1. Write the code so that `getComputerChoice` will randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. #### Step 3: Play round function -Your game will be played round by round. You will make a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement: +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement. 1. Create a new function named `playRound`. 1. Define two parameters for `playRound`: `playerChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments. @@ -64,7 +64,7 @@ console.log(playRound(playerSelection, computerSelection)); #### Step 4: Play game function -Your game will play 5 rounds. Write a function named `playGame` that uses `playRound` to play 5 rounds, keeps score, and declares a winner at the end: +Your game will play 5 rounds. You will write a function named `playGame` that calls `playRound` to play 5 rounds, keeps score, and declares a winner at the end. 1. Create a new function named `playGame`. 1. Get the human player choice using the `prompt` method. Read this [MDN article about the prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. From 5574e4826cf9cb9624fecadcb006659b0daa78e9 Mon Sep 17 00:00:00 2001 From: Cake Date: Mon, 25 Mar 2024 18:43:32 +0100 Subject: [PATCH 17/20] Apply remaining suggestions Co-authored-by: Eric Olkowski --- .../project_rock_paper_scissors.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index dfc1f17169c..f28678fca78 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -8,7 +8,7 @@ Some of the student solutions below contain buttons, text, and other elements. T ### Problem solving approach -Since this is the first JavaScript project being built from scratch, it's important to remember the wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). Before you start this project, follow these steps for each step of the project: +Since this is the first JavaScript project being built from scratch, it's important to remember the wise words from the [Problem Solving lesson](https://www.theodinproject.com/lessons/foundations-problem-solving). For each step in this project, be sure to do the following 1. Plan or pseudocode your solution. 1. Write the code. @@ -19,7 +19,7 @@ Since this is the first JavaScript project being built from scratch, it's import
Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). -#### Step 1: Initial structure +#### Step 1: Initiate the project structure 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. @@ -31,7 +31,7 @@ It's best practice to link to an external JavaScript file inside this script tag You don't have to write additional code in the HTML file. This game is played entirely via the console. -#### Step 2: Get computer choice function +#### Step 2: Write the logic to get the computer choice Your game will be played against the computer. You will write a function that randomly returns "Rock", "Paper" or "Scissors". @@ -40,7 +40,7 @@ Your game will be played against the computer. You will write a function that ra - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. -#### Step 3: Play round function +#### Step 3: Write the logic to play a single round Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement. @@ -62,7 +62,7 @@ const computerSelection = getComputerChoice(); console.log(playRound(playerSelection, computerSelection)); ``` -#### Step 4: Play game function +#### Step 4: Write the logic to entire the play the game Your game will play 5 rounds. You will write a function named `playGame` that calls `playRound` to play 5 rounds, keeps score, and declares a winner at the end. @@ -71,10 +71,8 @@ Your game will play 5 rounds. You will write a function named `playGame` that ca 1. Put the previous `playRound` function inside `playGame`. 1. Play 5 rounds by calling `playRound` 5 times. - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. - -Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful. - -If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson. + - Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful. + - If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson.
From e69a11d70da583155f60aaa731f2a604c00c9392 Mon Sep 17 00:00:00 2001 From: Cake Date: Wed, 17 Apr 2024 18:00:29 +0200 Subject: [PATCH 18/20] add additional steps Co-authored-by: Eric Olkowski --- .../project_rock_paper_scissors.md | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index f28678fca78..8e7ede1757e 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -19,7 +19,7 @@ Since this is the first JavaScript project being built from scratch, it's import
Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). -#### Step 1: Initiate the project structure +#### Step 1: Setup the project structure 1. Create a new Git repository for your project. 1. Create a blank HTML document with a script tag. @@ -33,42 +33,58 @@ You don't have to write additional code in the HTML file. This game is played en #### Step 2: Write the logic to get the computer choice -Your game will be played against the computer. You will write a function that randomly returns "Rock", "Paper" or "Scissors". +Your game will be played against the computer. You will write a function that randomly returns "rock", "paper" or "scissors". 1. Create a new function named `getComputerChoice`. -1. Write the code so that `getComputerChoice` will randomly `return` one of the following string values: "Rock", "Paper" or "Scissors". +1. Write the code so that `getComputerChoice` will randomly `return` one of the following string values: "rock", "paper" or "scissors". - **Hint**: The [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) method returns a random number that's greater than or equal to 0 and less than 1. Think about how you can use this to conditionally return one of the multiple choices. 1. Test that your function returns what you expect using `console.log` or [the browser developer tools](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools) before advancing to the next step. -#### Step 3: Write the logic to play a single round +#### Step 3: Write the logic to get the human choice -Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round and returns a winner announcement. +Your game will be played by a human player. You will write a function that takes the user input and randomly returns "rock", "paper" or "scissors". + +1. Create a new function named `getHumanChoice`. +1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. + - **Hint**: Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user's input. +1. Test what your function returns by using `console.log`. + +#### Step 4: Write the players score variables + +Your game will keep track of the players score. You will write variables to keep track of the players score. + +1. Create two new variables named `humanScore` and `computerScore` in the global scope. +1. Initialize those variables with the value of `0`. + +#### Step 5: Write the logic to play a single round + +Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner's score and logs a winner announcement. 1. Create a new function named `playRound`. 1. Define two parameters for `playRound`: `playerChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments. 1. Make your function's `playerSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations. -1. Write the code for your `playRound` function to `return` a string value representing the round winner, such as: "You lose! Paper beats Rock". +1. Write the code for your `playRound` function to `console.log` a string value representing the round winner, such as: "You lose! Paper beats Rock". +1. Increment the `humanScore` or `computerScore` variable based on the round winner. Example code: ```javascript -function playRound(playerChoice, computerChoice) { +function playRound(humanChoice, computerChoice) { // your code here! } -const playerSelection = "rock"; +const humanSelection = getHumanChoice(); const computerSelection = getComputerChoice(); -console.log(playRound(playerSelection, computerSelection)); +playRound(humanSelection, computerSelection); ``` -#### Step 4: Write the logic to entire the play the game +#### Step 6: Write the logic to play the entire game -Your game will play 5 rounds. You will write a function named `playGame` that calls `playRound` to play 5 rounds, keeps score, and declares a winner at the end. +Your game will play 5 rounds. You will write a function named `playGame` that calls `playRound` to play 5 rounds, keeps track of the scores and declares a winner at the end. 1. Create a new function named `playGame`. -1. Get the human player choice using the `prompt` method. Read this [MDN article about the prompt method](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) learn more about it. -1. Put the previous `playRound` function inside `playGame`. +1. Move your `playRound` function and score variables so that they're declared inside of the new `playGame` function 1. Play 5 rounds by calling `playRound` 5 times. - **Hint**: When you assign a function call to a variable, the return value of that function is assigned to the variable. Accessing the variable afterward will only provide the assigned value; it doesn't recall the function. You need to recall the choice functions to get new choices for each round. - Re-work your previous functions or create more helper functions if necessary. Specifically, you may want to change the return values to something more useful. From 28dfc9119bf427398e6444abe99ad75304481700 Mon Sep 17 00:00:00 2001 From: Cake Date: Sun, 21 Apr 2024 15:54:04 +0200 Subject: [PATCH 19/20] fix md linting issues --- .../javascript_basics/project_rock_paper_scissors.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 8e7ede1757e..85616e29b86 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -3,7 +3,9 @@ For this project, you will create the game [Rock Paper Scissors](https://www.wikihow.com/Play-Rock,-Paper,-Scissors). This game will be played entirely in the console.
+ Some of the student solutions below contain buttons, text, and other elements. These elements are part of what is called a graphical user interface (GUI). You'll create the GUI in a later lesson. In the meantime, remember to commit your code to GitHub. +
### Problem solving approach @@ -17,6 +19,7 @@ Since this is the first JavaScript project being built from scratch, it's import ### Assignment
+ Remember to commit early and often! To refresh your memory, check out the [commit messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages). #### Step 1: Setup the project structure @@ -91,10 +94,13 @@ Your game will play 5 rounds. You will write a function named `playGame` that ca - If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson.
+
+ When making interactive projects, like this one, you might be tempted to add more features, improve interactivity, user experience, design and styling of your website, and so on. We recommend not doing that, and saving this effort for your portfolio projects. For more information on learning mindset and portfolio pieces read [Part 5](https://dev.to/theodinproject/learning-code-f56) and [Part 7](https://dev.to/theodinproject/strategically-building-your-portfolio-1km4) of [Becoming a TOP Success Story](https://dev.to/theodinproject/becoming-a-top-success-story-mindset-3dp2) +
From 3345fa10d4825db3db8dba60d61af680b2b65000 Mon Sep 17 00:00:00 2001 From: Cake Date: Sun, 21 Apr 2024 16:00:50 +0200 Subject: [PATCH 20/20] fix mistakes --- .../javascript_basics/project_rock_paper_scissors.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/foundations/javascript_basics/project_rock_paper_scissors.md b/foundations/javascript_basics/project_rock_paper_scissors.md index 85616e29b86..439e3da7b54 100644 --- a/foundations/javascript_basics/project_rock_paper_scissors.md +++ b/foundations/javascript_basics/project_rock_paper_scissors.md @@ -45,14 +45,14 @@ Your game will be played against the computer. You will write a function that ra #### Step 3: Write the logic to get the human choice -Your game will be played by a human player. You will write a function that takes the user input and randomly returns "rock", "paper" or "scissors". +Your game will be played by a human player. You will write a function that takes the user choice returns it. 1. Create a new function named `getHumanChoice`. 1. Write the code so that `getHumanChoice` will return one of the valid choices depending on what the user inputs. - **Hint**: Use the [prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) method to get the user's input. 1. Test what your function returns by using `console.log`. -#### Step 4: Write the players score variables +#### Step 4: Declare the players score variables Your game will keep track of the players score. You will write variables to keep track of the players score. @@ -64,8 +64,8 @@ Your game will keep track of the players score. You will write variables to keep Your game will be played round by round. You will write a function that takes the human and computer player choices as arguments, plays a single round, increments the round winner's score and logs a winner announcement. 1. Create a new function named `playRound`. -1. Define two parameters for `playRound`: `playerChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments. -1. Make your function's `playerSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations. +1. Define two parameters for `playRound`: `humanChoice` and `computerChoice`. Use these two parameters to take the human and computer choices as arguments. +1. Make your function's `humanSelection` parameter case-insensitive so that players can input "rock", "ROCK", "RocK", or other variations. 1. Write the code for your `playRound` function to `console.log` a string value representing the round winner, such as: "You lose! Paper beats Rock". 1. Increment the `humanScore` or `computerScore` variable based on the round winner.