diff --git a/README.md b/README.md index f108acf..042d082 100644 --- a/README.md +++ b/README.md @@ -10,109 +10,109 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, #### Planning -- [ ] Complete the project planning document +- [X] 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 import to a new workspace -- [ ] Link and commit your changes -- [ ] Make your site live on GitHub Pages +- [?] Fork this repository to your Github account and import to a new workspace +- [?] Link and commit your changes +- [X] Make your site live on GitHub Pages #### Code Walkthrough -- [ ] Read through the starter code given so you understand how the HTML is organized +- [x] Read through the starter code given so you understand how the HTML is organized ### 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 +- [x] Add a click handler that saves the value of the user's input to a variable +- [x] Display the user input value on the screen, in the user choice location #### Wrap -- [ ] Commit your changes! +- [x] Commit your changes! ## Day 2 ### Day 2 Goal 1: Generate a new random number every time the user clicks the button -- [ ] Outside of your click handler, declare a randomNumber variable and set it equal to 0 -- [ ] In your click handler, generate a random number and assign it to the randomNumber variable +- [x] Outside of your click handler, declare a randomNumber variable and set it equal to 0 +- [x] 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 +- [x] Display the randomNumber value on the screen, in the computer choice location #### Wrap -- [ ] Commit your changes! +- [X] Commit your changes! ## Day 3 ### 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 +- [x] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable +- [x] 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 +- [x] 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 +- [x] Write a compound conditional statement that compares the userChoice to the computerChoice +- [x] Declare a variable to save the winner of the game +- [x] 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 +- [x] Test that your game performs correctly in case of a tie +- [x] Clear the input value once a result is displayed so your game is ready to play again #### Wrap -- [ ] Commit your changes! +- [X] 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 +- [x] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice +- [x] Move your `Math.random` inside your function +- [x] 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 +- [x] Call your function inside your click handler so that it determines the value of your computerChoice variable + - [x] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called #### Wrap -- [ ] Commit your changes! +- [x] 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 +- [x] Write a function called chooseWinner that does accepts two parameters and returns winner +- [x] 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 +- [x] 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! +- [x] Commit your changes! ## Projects Extensions: - [ ] 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”) +- [x] Validates input so that it will return “Not valid input” if the user types in a wrong choice. +- [x] 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) diff --git a/js/script.js b/js/script.js index 8b13789..c79e2cd 100644 --- a/js/script.js +++ b/js/script.js @@ -1 +1,80 @@ +//Global Variables +let randomNumber; +let computerChoice; + +$(".play").click(function () { + + //User choice + let choice = $(".input").val(); + choice = choice.toLowerCase(); + if (choice === "rock" || choice === "paper" || choice === "scissors") { + $(".userChoice").text(choice); + } else { + $(".userChoice").text("Invalid Input"); + } + + //Generate computer's choice + computerChoice = getRandomComputerChoice(); + $(".computerChoice").text(computerChoice); + + chooseWinner(choice, computerChoice) + + $(".input").val(""); + +}); + +function getRandomComputerChoice() { + randomNumber = Math.random() * 3; + if (randomNumber < 1) { + computerChoice = "rock"; + } else if (randomNumber < 2) { + computerChoice = "paper"; + } else { + computerChoice = "scissors"; + } + + return computerChoice; +} + +function chooseWinner(choice, computerChoice) { + + let winner; + + //draw + if (choice === computerChoice) { + winner = ""; + $(".result").text("Draw"); + } + + //lose + if (choice === "rock" && computerChoice === "paper") { + winner = " Computer"; + $(".result").text("YOU LOSE!"); + } + if (choice === "paper" && computerChoice === "scissors") { + winner = " Computer"; + $(".result").text("YOU LOSE!"); + } + if (choice === "scissors" && computerChoice === "rock") { + winner = " Computer"; + $(".result").text("YOU LOSE!"); + } + + //win + if (choice === "rock" && computerChoice === "scissors") { + winner = " User"; + $(".result").text("YOU WIN!"); + } + if (choice === "paper" && computerChoice === "rock") { + winner = " User"; + $(".result").text("YOU WIN!"); + } + if (choice === "scissors" && computerChoice === "paper") { + winner = " User"; + $(".result").text("YOU WIN!"); + } + + return winner; +} +