Merge pull request #10 from emilygarvey/master

update for 21-22

README.md

@@ -1,63 +1,125 @@
 # Rock Paper Scissors Project
 
-## Overview: 
-In this unit, coders will create a Rock, Paper, Scissors game. To create this project, coders will use JavaScript to take user input, use the Math Library to pick a random computer choice, and use conditionals to determine the winner.
+## Overview:
+
+In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, Scissors game will take user choice, generate a computer choice, and display the winner to the screen. Then, coders will refactor their working project to add functions. To create this project, coders will use jQuery to take user input and display data, the Math Library to generate a random choice, and conditionals to determine the winner.
 
 ## Day 1
 
+### Day 1 Goal 1: Set up
+
 #### Planning
-- [ ] Copy the [project planning document](https://docs.google.com/document/d/1CCzFGH6Z4AtpWrDuB6KQK73N5-8ywGv0KhO10i3hZPk/edit#) and link a completed version in your ReadMe.
 
-#### Set-Up
+- [ ] Complete the project planning document
+
+#### GitHub Set-Up
+
 - [x] Go to the repository at https://github.com/itscodenation/rockpaperscissors
-- [ ] Fork this repository to your Github account and pull it down to Glitch
-- [ ] Look through all the Starter Code
+- [ ] Fork this repository to your Github account and import to a new workspace
+- [ ] Link and commit your changes
+- [ ] Make your site live on GitHub Pages
+
+#### Code Walkthrough
 
-### JavaScript
-- [ ] Use JavaScript to display the value of the input on the page
+- [ ] Read through the starter code given so you understand how the HTML is organized
 
-### HTML and CSS
-- [ ] Add any more HTML elements you will need to the page
-- [ ] Customize your HTML with CSS
+### Day 1 Goal 2: Capture user input and display it to the screen
+
+- [ ] Add a click handler that saves the value of the user's input to a variable
+- [ ] Display the user input value on the screen, in the user choice location
 
 #### Wrap
-- [ ] Save and submit your website using the link on the session agenda.
+
+- [ ] Commit your changes!
 
 ## Day 2
 
-### Javascript 
+### Day 2 Goal 1: Generate a new random number every time the user clicks the button
 
-- [ ] Outside of your click handler, declare the variables you'll need to track the user choice, computer choice and winner and assign them values of empty strings.
 - [ ] Outside of your click handler, declare a randomNumber variable and set it equal to 0
-- [ ] When the user initiates the game, generate a random number and assign it to the randomNumber variable.
-- [ ] When the user initiates the game, store the user choice.
-- [ ] When the user initiates the game, display user choice to the screen.
+- [ ] In your click handler, generate a random number and assign it to the randomNumber variable
+
+### Day 2 Goal 2: Display the random number to the screen
+
+- [ ] Display the randomNumber value on the screen, in the computer choice location
 
 #### Wrap
-- [ ] Save and submit your website using the link on the session agenda.
+
+- [ ] Commit your changes!
 
 ## Day 3
 
-## JavaScript
-- [ ] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the variable that holds the computer choice. 
-- [ ] Display the computer choice to the screen.
-- [ ] Write conditional statements that compare the user choice to the computer choice to determine the winner of the game.
-- [ ] Display the winner to the screen.
-- [ ] Clear the input value once a result is displayed.
+### Day 3 Goal 1: Assign different computer choices depending on the random number
+
+- [ ] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable
+- [ ] Update the computer choice location so it displays the computerChoice to the screen
+
+### Day 3 Goal 2: Increase user experience (BONUS!)
+
+- [ ] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input
+
+## Day 4
+
+### Day 4 Goal 1: Compare the user choice and computer choice to determine a winner
+
+- [ ] Write a compound conditional statement that compares the userChoice to the computerChoice
+- [ ] Declare a variable to save the winner of the game
+- [ ] Display the winner to the screen in the result div
+
+### Day 4 Goal 2: Increase user experience (BONUS!)
+
+- [ ] Test that your game performs correctly in case of a tie
+- [ ] Clear the input value once a result is displayed so your game is ready to play again
 
 #### Wrap
-- [ ] Save and submit your website using the link on the session agenda.
 
+- [ ] Commit your changes!
+
+#### Day 5
+
+### Day 5 Goal 1: Create a function to handle your computer choice logic
+
+- [ ] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice
+- [ ] Move your `Math.random` inside your function
+- [ ] Move your conditional logic that determines the computer choice inside your function
+
+### Day 5 Goal 2: Call your getRandomComputerChoice function
+
+- [ ] Call your function inside your click handler so that it determines the value of your computerChoice variable
+  - [ ] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called
+
+#### Wrap
+
+- [ ] Commit your changes!
+
+#### Day 6
+
+### Day 6 Goal 1: Create a function to handle your winner logic
+
+- [ ] Write a function called chooseWinner that does accepts two parameters and returns winner
+- [ ] Move your compound conditional logic that determines the winner inside your function
+
+### Day 6 Goal 2: Call your chooseWinner function
+
+- [ ] Call your function inside your click handler so that it determines the value of your winner variable
+  - [ ] HINT: Your chooseWinner function works correctly if it returns "User wins!", "Computer wins!" or "No one wins!" when called
+
+#### Wrap
+
+- [ ] Commit your changes!
 
 ## Projects Extensions:
-- [ ] Style your page to fit the developer's personality
-- [ ] Validate the input so that it will return “Not valid input” if the user types in a wrong choice. 
-- [ ] Accept any form of a word regardless of capitalization (i.e. “Rock” “rock” roCk”)
-- [ ] Keep track of total wins and losses, until the page refreshes. 
-- [ ] Allow for more variety in throwing options. Example: [Rock-Paper-Scissors-Lizard-Spock](http://en.wikipedia.org/wiki/Rock-paper-scissors-lizard-Spock)
+
+- [ ] Style the page to fit your personality
+- [ ] Validates input so that it will return “Not valid input” if the user types in a wrong choice.
+- [ ] Accepts any form of a word regardless of capitalization (i.e. “Rock” “rock” roCk”)
+- [ ] Keeps track of total wins and losses, until the page refreshes.
+- [ ] Create a game with more variety in throwing options. Example: [Rock-Paper-Scissors-Lizard-Spock](http://en.wikipedia.org/wiki/Rock-paper-scissors-lizard-Spock)
 
 ## References/Tools
-* [Fellowship Reference Table](https://docs.google.com/document/d/1qrY2OC-6S04oOXZlYmXja7lmKBmdApR-HXJkhfd67e8/)
-* [How Jquery Works](http://learn.jquery.com/about-jquery/how-jquery-works/)
-* [JQuery Events](http://api.jquery.com/category/events/)
-* [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
+
+- [Code Nation Reference Table]()
+- [Script Tag](http://javascript.crockford.com/script.html)
+- [How Jquery Works](http://learn.jquery.com/about-jquery/how-jquery-works/)
+- [JQuery Events](http://api.jquery.com/category/events/)
+- [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)

css/style.css

@@ -1,9 +1,7 @@
-.row{
-  text-align:center;
-
+.row {
+  text-align: center;
+}
+.choices {
+  display: flex;
+  justify-content: space-between;
 }
-#choices{
-  display:flex;
-  justify-content:space-between;
-
-}

index.html

@@ -1,48 +1,38 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>RPS Game</title>
+    <!-- Link CSS here -->
+    <link type="text/css" rel="stylesheet" href="css/style.css" />
+  </head>
 
-<head>
-  <title>RPS Game</title>
-  <!-- Link CSS here -->
-  <link type='text/css' rel='stylesheet' href='css/style.css' />
-</head>
-
-<body>
-
-   <!-- HTML/CSS options: In the div below. 
-        1. In the header tag, change a title.
-        2. In a paragraph tag, add instructions on how to play the game.
-        3. Change the RPS image.
-        4. Style your page with colors, fonts, etc.
-     -->
-
-  <div class="row">
+  <body>
+    <div class="row">
       <h1>Rock Paper Scissors</h1>
-      <img src="http://www.coltnews.com/wp-content/uploads/2016/04/RPS.png">
+      <img src="http://www.coltnews.com/wp-content/uploads/2016/04/RPS.png" />
 
       <h3>Please Submit Your Choice Below</h3>
       <div>
-        <input id="input">
-        <button id="shoot">Shoot!</button>
+        <input class="input" />
+        <button class="play">play!</button>
       </div>
 
-      <div id="choices" class="row">
+      <div class="choices" class="row">
         <div>
           <h4>User Choice</h4>
-          <p id="userChoice"></p>
+          <p class="userChoice"></p>
         </div>
         <div>
           <h4>Computer Choice</h4>
-          <p id="computerChoice"></p>
+          <p class="computerChoice"></p>
         </div>
       </div>
-      <div id="result"></div>
-  </div>
-
-  <!-- Link JQuery here -->
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-  <!-- Link script.js here -->
-  <script src='js/script.js'></script>
-</body>
+      <div class="result"></div>
+    </div>
 
+    <!-- Link JQuery here -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <!-- Link script.js here -->
+    <script src="js/script.js"></script>
+  </body>
 </html>

js/script.js

@@ -1,9 +1 @@
-// *************************** YOUR CODE BELOW *******************************
-//******************TEST EARLY AND OFTEN USING console.log() ******************
-//****************** SERIOUSLY TEST USING console.log()!!! ******************
-
-//GLOBAL VARIABLES
-/* global $ */
-
-