From 245c6e2f78598250a0189697bf30b50f5c75be88 Mon Sep 17 00:00:00 2001 From: Emily Garvey Date: Thu, 18 Oct 2018 21:26:44 +0000 Subject: [PATCH 1/6] fork --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5699df4c..45f86909 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, - [ ] Complete the project planning document. #### Set-Up - [x] Go to the repository at https://github.com/ScriptEdcurriculum/rockpaperscissors -- [ ] Fork this repository to your github account and clone to a new workspace -- [ ] Add, commit, and push your changes -- [ ] Make your site live on gh-pages +- [x] Fork this repository to your github account and clone to a new workspace +- [x] Add, commit, and push your changes +- [x] Make your site live on gh-pages ### HTML - [ ] Add any more HTML elements you will need to the page From 41d9dd3f18fd7e31aad156243b18f6c947345c86 Mon Sep 17 00:00:00 2001 From: Emily Garvey Date: Sat, 20 Oct 2018 15:42:32 +0000 Subject: [PATCH 2/6] readme done --- README.md | 25 +++++++++++++------------ index.html | 6 +++++- js/script.js | 39 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 55 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 45f86909..c86940a2 100644 --- a/README.md +++ b/README.md @@ -14,10 +14,10 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, - [x] Make your site live on gh-pages ### HTML -- [ ] Add any more HTML elements you will need to the page +- [x] Add any more HTML elements you will need to the page ### JavaScript -- [ ] Add a click handler that displays the value of the input within the div with the id `#userChoice` +- [x] Add a click handler that displays the value of the input within the div with the id `#userChoice` #### Wrap - [ ] Push your changes! @@ -27,22 +27,23 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, ### Javascript -- [ ] Outside of your click handler, declare 3 variables (userChoice, computerChoice and winner) and assign them values of empty strings -- [ ] 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 -- [ ] In your click handler, store the input value in the userChoice variable -- [ ] In your click handler, display userChoice to the screen +- [x] Outside of your click handler, declare 3 variables (userChoice, computerChoice and winner) and assign them values of empty strings +- [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 +- [x] In your click handler, store the input value in the userChoice variable +- [x] In your click handler, display userChoice to the screen + #### Wrap - [ ] Push your changes! ## Day 3 ## JavaScript -- [ ] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the computerChoice variable -- [ ] Display the computerChoice to the screen -- [ ] Write a conditional statement that compares the userChoice to the computerChoice to determine the winner of the game -- [ ] Display the winner to the screen in the result div -- [ ] Clear the input value once a result is displayed +- [x] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the computerChoice variable +- [x] Display the computerChoice to the screen +- [x] Write a conditional statement that compares the userChoice to the computerChoice to determine the winner of the game +- [x] Display the winner to the screen in the result div +- [x] Clear the input value once a result is displayed #### Wrap - [ ] Push your changes! diff --git a/index.html b/index.html index b9c796d5..518f5f51 100644 --- a/index.html +++ b/index.html @@ -37,8 +37,12 @@

User Choice

Computer Choice

+
+

Winner

+

+
-
+ diff --git a/js/script.js b/js/script.js index b5c95dc1..a40f2c07 100644 --- a/js/script.js +++ b/js/script.js @@ -4,8 +4,43 @@ //GLOBAL VARIABLES /* global $ */ - - +var human; +var computer; +var winner; +var randomNumber; // DOCUMENT READY FUNCTION BELOW +$("#shoot").click(function() { + human = $("#input").val().toLowerCase().trim(); + $("#userChoice").text(human); + randomNumber = Math.random(); + if (randomNumber < 0.333334) { + computer = "rock"; + } else if (randomNumber > 0.333333 && randomNumber < 0.666667) { + computer = "scissors"; + } else { + computer = "paper"; + } + $("#computerChoice").text(computer); + if (human === "rock" && computer === "scissors") { + $("#result").text("User wins!"); + } else if (human === "rock" && computer === "paper") { + $("#result").text("Computer wins!"); + } else if (human === "rock" && computer === "rock") { + $("#result").text("Tie!"); + } else if (human === "scissors" && computer === "scissors") { + $("#result").text("Tie!"); + } else if (human === "scissors" && computer === "paper") { + $("#result").text("User wins!"); + } else if (human === "scissors" && computer === "rock") { + $("#result").text("Computer wins!"); + } else if (human === "paper" && computer === "scissors") { + $("#result").text("Computer wins!"); + } else if (human === "paper" && computer === "paper") { + $("#result").text("Tie!"); + } else if (human === "paper" && computer === "rock") { + $("#result").text("User wins!"); + } + $("#input").val(""); +}); \ No newline at end of file From 02d8a7e3fdbff7cd3fee2202eee7e8ab015c4751 Mon Sep 17 00:00:00 2001 From: Emily Garvey Date: Thu, 10 Jan 2019 20:37:11 +0000 Subject: [PATCH 3/6] Math.random scope --- js/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index a40f2c07..45f4e9dd 100644 --- a/js/script.js +++ b/js/script.js @@ -7,14 +7,14 @@ var human; var computer; var winner; -var randomNumber; +var randomNumber = Math.random(); // DOCUMENT READY FUNCTION BELOW + $("#shoot").click(function() { human = $("#input").val().toLowerCase().trim(); $("#userChoice").text(human); - randomNumber = Math.random(); if (randomNumber < 0.333334) { computer = "rock"; } else if (randomNumber > 0.333333 && randomNumber < 0.666667) { From cf0d67665433ff6d13006bfc6ab62d236b13444b Mon Sep 17 00:00:00 2001 From: Emily Garvey <41160828+emilygarvey@users.noreply.github.com> Date: Mon, 10 May 2021 11:11:56 -0400 Subject: [PATCH 4/6] update to functions & README --- README.md | 127 ++++++++++++++++++++++++++++++++++++-------------- css/style.css | 14 +++--- index.html | 56 ++++++++-------------- js/script.js | 93 +++++++++++++++++++----------------- 4 files changed, 168 insertions(+), 122 deletions(-) diff --git a/README.md b/README.md index c86940a2..fa8e5461 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,120 @@ # Rock Paper Scissors Project -## 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. 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. +## 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 -- [ ] Complete the project planning document. -#### Set-Up -- [x] Go to the repository at https://github.com/ScriptEdcurriculum/rockpaperscissors -- [x] Fork this repository to your github account and clone to a new workspace -- [x] Add, commit, and push your changes -- [x] Make your site live on gh-pages -### HTML -- [x] Add any more HTML elements you will need to the page +- [ ] Complete the project planning document + +#### GitHub Set-Up + +- [x] Go to the repository at https://github.com/itscodenation/rockpaperscissors +- [x] Fork this repository to your Github account and import to a new workspace +- [x] Link and commit your changes +- [x] Make your site live on GitHub Pages + +#### Code Walkthrough -### JavaScript -- [x] Add a click handler that displays the value of the input within the div with the id `#userChoice` +- [ ] 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 #### Wrap -- [ ] Push your changes! -- [ ] Save and submit your website using the link on the Daily Session Document. + +- [ ] 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 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 3 variables (userChoice, computerChoice and winner) and assign them values of empty strings -- [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 -- [x] In your click handler, store the input value in the userChoice variable -- [x] In your click handler, display userChoice to the screen +### Day 2 Goal 2: Display the random number to the screen + +- [ ] Display the randomNumber value on the screen, in the computer choice location #### Wrap -- [ ] Push your changes! + +- [ ] Commit your changes! ## Day 3 -## JavaScript -- [x] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to the computerChoice variable -- [x] Display the computerChoice to the screen -- [x] Write a conditional statement that compares the userChoice to the computerChoice to determine the winner of the game -- [x] Display the winner to the screen in the result div -- [x] 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: 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 3 Goal 3: Increase user experience + +- [ ] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input +- [ ] 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 -- [ ] Push your changes! + +- [ ] Commit your changes! + +#### Day 4 + +### Day 4 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 4 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 5 + +### Day 5 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 5 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 the page to fit your personality -- [ ] Validates input so that it will return “Not valid input” if the user types in a wrong choice. +- [ ] 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. +- [ ] 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 -* [Advanced 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) + +- [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) diff --git a/css/style.css b/css/style.css index 5b1f9c3b..bc6701af 100644 --- a/css/style.css +++ b/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; - -} \ No newline at end of file diff --git a/index.html b/index.html index 518f5f51..820e449f 100644 --- a/index.html +++ b/index.html @@ -1,54 +1,38 @@ + + RPS Game + + + - - RPS Game - - - - - - - - -
+ +

Rock Paper Scissors

- +

Please Submit Your Choice Below

- - + +
-
+

User Choice

-

+

Computer Choice

-

+

-
-

Winner

-

-
- -
- - - - - - +
+
+ + + + + diff --git a/js/script.js b/js/script.js index 45f4e9dd..660b1cb8 100644 --- a/js/script.js +++ b/js/script.js @@ -1,46 +1,53 @@ -// *************************** YOUR CODE BELOW ******************************* -//******************TEST EARLY AND OFTEN USING console.log() ****************** -//****************** SERIOUSLY TEST USING console.log()!!! ****************** +//Click Function when play is clicked +$(".play").click(function () { + //Takes in User Choice from the input box and stores it in a variable + let userChoice = $(".input").val(); -//GLOBAL VARIABLES -/* global $ */ -var human; -var computer; -var winner; -var randomNumber = Math.random(); + //Display the user choice to the screen + $(".userChoice").html(userChoice); -// DOCUMENT READY FUNCTION BELOW + //Display the computer choice to the screen + let computerChoice = getRandomComputerChoice(); + $(".computerChoice").html(computerChoice); - -$("#shoot").click(function() { - human = $("#input").val().toLowerCase().trim(); - $("#userChoice").text(human); - if (randomNumber < 0.333334) { - computer = "rock"; - } else if (randomNumber > 0.333333 && randomNumber < 0.666667) { - computer = "scissors"; - } else { - computer = "paper"; - } - $("#computerChoice").text(computer); - if (human === "rock" && computer === "scissors") { - $("#result").text("User wins!"); - } else if (human === "rock" && computer === "paper") { - $("#result").text("Computer wins!"); - } else if (human === "rock" && computer === "rock") { - $("#result").text("Tie!"); - } else if (human === "scissors" && computer === "scissors") { - $("#result").text("Tie!"); - } else if (human === "scissors" && computer === "paper") { - $("#result").text("User wins!"); - } else if (human === "scissors" && computer === "rock") { - $("#result").text("Computer wins!"); - } else if (human === "paper" && computer === "scissors") { - $("#result").text("Computer wins!"); - } else if (human === "paper" && computer === "paper") { - $("#result").text("Tie!"); - } else if (human === "paper" && computer === "rock") { - $("#result").text("User wins!"); - } - $("#input").val(""); -}); \ No newline at end of file + //Displays the winner choice to the screen + let winner = chooseWinner(userChoice, computerChoice); + $(".result").html(winner); + + // Clears the input box + $(".input").val(""); +}); + +function getRandomComputerChoice() { + let randomNumber = Math.random(); + let computerChoice; + + if (randomNumber < 0.33) { + computerChoice = "rock"; + } else if (randomNumber < 0.67) { + computerChoice = "paper"; + } else { + computerChoice = "scissors"; + } + return computerChoice; +} + +function chooseWinner(userChoice, computerChoice) { + let winner; + if ( + (userChoice === "rock" && computerChoice === "paper") || + (userChoice === "paper" && computerChoice === "scissors") || + (userChoice === "scissors" && computerChoice === "rock") + ) { + winner = "Computer Wins!"; + } else if ( + (userChoice === "rock" && computerChoice === "scissors") || + (userChoice === "paper" && computerChoice === "rock") || + (userChoice === "scissors" && computerChoice === "paper") + ) { + winner = "User Wins!"; + } else { + winner = "No one Wins!"; + } + return winner; +} From 8b26f7e26489f54bdbb81c3ad376665d301e49ae Mon Sep 17 00:00:00 2001 From: Emily Garvey <41160828+emilygarvey@users.noreply.github.com> Date: Mon, 10 May 2021 13:25:18 -0400 Subject: [PATCH 5/6] update readme day order --- README.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index fa8e5461..b496852e 100644 --- a/README.md +++ b/README.md @@ -54,15 +54,20 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, - [ ] 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: Compare the user choice and computer choice to determine a winner +### 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 3 Goal 3: Increase user experience +### Day 4 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 - [ ] 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 @@ -70,15 +75,15 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, - [ ] Commit your changes! -#### Day 4 +#### Day 5 -### Day 4 Goal 1: Create a function to handle your computer choice logic +### 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 4 Goal 2: Call your getRandomComputerChoice 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 @@ -87,14 +92,14 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, - [ ] Commit your changes! -#### Day 5 +#### Day 6 -### Day 5 Goal 1: Create a function to handle your winner logic +### 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 5 Goal 2: Call your chooseWinner 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 From c6dabbbc32efda9e47224445d0828a7a0830f504 Mon Sep 17 00:00:00 2001 From: Emily Garvey <41160828+emilygarvey@users.noreply.github.com> Date: Thu, 27 May 2021 16:08:54 -0400 Subject: [PATCH 6/6] starter code --- README.md | 6 +++--- js/script.js | 53 ---------------------------------------------------- 2 files changed, 3 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index b496852e..60492045 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, #### GitHub Set-Up - [x] Go to the repository at https://github.com/itscodenation/rockpaperscissors -- [x] Fork this repository to your Github account and import to a new workspace -- [x] Link and commit your changes -- [x] 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 +- [ ] Make your site live on GitHub Pages #### Code Walkthrough diff --git a/js/script.js b/js/script.js index 660b1cb8..e69de29b 100644 --- a/js/script.js +++ b/js/script.js @@ -1,53 +0,0 @@ -//Click Function when play is clicked -$(".play").click(function () { - //Takes in User Choice from the input box and stores it in a variable - let userChoice = $(".input").val(); - - //Display the user choice to the screen - $(".userChoice").html(userChoice); - - //Display the computer choice to the screen - let computerChoice = getRandomComputerChoice(); - $(".computerChoice").html(computerChoice); - - //Displays the winner choice to the screen - let winner = chooseWinner(userChoice, computerChoice); - $(".result").html(winner); - - // Clears the input box - $(".input").val(""); -}); - -function getRandomComputerChoice() { - let randomNumber = Math.random(); - let computerChoice; - - if (randomNumber < 0.33) { - computerChoice = "rock"; - } else if (randomNumber < 0.67) { - computerChoice = "paper"; - } else { - computerChoice = "scissors"; - } - return computerChoice; -} - -function chooseWinner(userChoice, computerChoice) { - let winner; - if ( - (userChoice === "rock" && computerChoice === "paper") || - (userChoice === "paper" && computerChoice === "scissors") || - (userChoice === "scissors" && computerChoice === "rock") - ) { - winner = "Computer Wins!"; - } else if ( - (userChoice === "rock" && computerChoice === "scissors") || - (userChoice === "paper" && computerChoice === "rock") || - (userChoice === "scissors" && computerChoice === "paper") - ) { - winner = "User Wins!"; - } else { - winner = "No one Wins!"; - } - return winner; -}