Rewrite "rock paper scissors" project

foundations/javascript_basics/project_rock_paper_scissors.md

@@ -1,44 +1,84 @@
 ### Introduction
 
-We're going to make an 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!
+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)
 
-### Quick exercises before starting
+<div class="lesson-note">
+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.
+</div>
+
+### 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.
 
-1. Identify three ways to include JavaScript in a page.
-1. Test it out! Write `console.log("Hello World");` in JavaScript and check to see if it displays in the browser's console.
+### Problem solving approach
 
-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!
+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.
+1. Test your code to make sure it works.
 
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
-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, 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 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 via the console.
+
+#### 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':
+
+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".
+   - **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:
+
+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 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!
+}
+
+const playerSelection = "rock";
+const computerSelection = getComputerChoice();
 
-1. Start a new Git repo for your project.
-1. 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.
-1. 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!*
-1. 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 or tie of the round like so: `"You Lose! Paper beats Rock"`
+console.log(playRound(playerSelection, computerSelection));
+```
 
-   - Make your function's playerSelection parameter case-insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation).
+#### Step 4: game function
 
-1. **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:
+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:
 
-   ```javascript
-   function playRound(playerSelection, computerSelection) {
-     // your code here!
-   }
+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.
+   - **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.
 
-   const playerSelection = "rock";
-   const computerSelection = getComputerChoice();
-   console.log(playRound(playerSelection, computerSelection));
-   ```
+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.
 
-1. Write a NEW function called `playGame()`. Use the previous function *inside* of this one to play a five 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)
-   - 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.
+If you already know about loops, you can use them. If not, don't worry! Loops will be covered in the next lesson.
 
 </div>
 <div class="lesson-note" markdown="1">