From c5026cead8a7dae67db4126fb683633ad73248b4 Mon Sep 17 00:00:00 2001 From: Kim Schlesinger Date: Tue, 10 May 2016 17:02:01 -0600 Subject: [PATCH 01/10] initial refactor --- README.md | 58 +++++++++++++++++----------------- index.html | 92 +++++++++++++++++++++++++++++++----------------------- script.js | 41 ++++++++++++++++++++++++ 3 files changed, 123 insertions(+), 68 deletions(-) create mode 100644 script.js diff --git a/README.md b/README.md index 60c991e..2fe8d17 100644 --- a/README.md +++ b/README.md @@ -24,14 +24,14 @@ For this workshop, you need to have the following: Making its first appearance in 1995, JavaScript was created by an engineer at Netscape to provide a user-friendly, lightweight programming language that can be easily adapted for the rise of the Internet. Now, with HTML and CSS, it is one of the core languages of the Internet and is growing quickly to accommodate beyond the client-side. -JavaScript allows web pages to do more than just “sit there." You can animate, calculate, etc. - you can do it all! +JavaScript allows web pages to do more than just “sit there." You can animate, calculate, etc. - you can do it all! It is a great programming bridge between “design” and “development” that allows for endless creativity. Common confusion: JavaScript is **NOT** JavaScript. They are largely different programming languages and should not be confused with one another. ### A Quick Mini-Tutorial -In order to go over some basic JavaScript concepts, let's follow a tutorial provided by the [JavaScript.com](http://chrome.google.com) team. +In order to go over some basic JavaScript concepts, let's follow a tutorial provided by the [JavaScript.com](http://chrome.google.com) team. It's only 8 lessons and takes less than 5 minutes. @@ -43,8 +43,8 @@ Let's review some of the basic syntax of JavaScript. - `var` - defines a variable (an object of some value) - `;` - terminator, commonly found at the end of a code operation -- `"word"` - quotes create strings, which are a form of data -- `function()` - performs some action or method +- `"word"` - quotes create strings, which are a form of data +- `function()` - performs some action or method - `{}` - block notation, contains code that can be initialized by a function - `.` - dot notation, allows for the chaining of variables and functions @@ -63,7 +63,7 @@ var price2 = 6; var total = price1 + price2; ``` -What is the value of `total`? +What is the value of `total`? **Variables** can store a variety of data types: @@ -121,7 +121,7 @@ multiply(2,4); ### Conditional Statements -Remember [Choose Your Own Adventure](https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure) books? +Remember [Choose Your Own Adventure](https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure) books? Conditional statements work a lot like them and follow the basic format: *if*, *else*, *else if*... @@ -145,20 +145,20 @@ if statements by themselves default to `True`. ```javascript if (hour < 18) { greeting = "Good day"; -} else +} else { greeting = “Go away.”; } ``` ###### Else if Statements -**else if** - What if another scenario comes up? +**else if** - What if another scenario comes up? Add an `else if` in between the `if` and `else` statements. ```javascript -if (hour < 18) -{greeting = "Good day";} -else if (hour < 9) +if (hour < 18) +{greeting = "Good day";} +else if (hour < 9) {greeting = “OK day”;} else {greeting = “Go away.”;} ``` @@ -177,18 +177,19 @@ _Is there any other way to do this?_ Time for us to make our *Rock, Paper, Scissors* application! 1. Go to: https://github.com/GalvanizeOpenSource/Learn-To-Code-JavaScript/ -2. Download the zip file of our code -3. Open the files in your text editor - 4. index.html - 5. CSS/style.css -6. Open the index.html file in your web browser +1. Download the zip file of our code +1. Open the files in your text editor + a. index.html + b. CSS/style.css +1. Open the index.html file in your web browser -#### 4 Steps To Building This App +#### 5 Steps To Building This App -1. Get the user's choice -2. Get the computer's choice -3. Teach the computer how to guess rock, paper, or scissors -4. Compare their choices and tell the user the result +1. Get the user's name +1. Get the user's throw: either rock, paper, or scissors +1. Have the computer generate a random number between 0-1. +1. Use a conditional statement to assign rock, paper, and scissors to the computer's random number +1. Compare the user's throw and the computer's throw, and tell the user who won ###### 1. Get the user's choice @@ -202,7 +203,6 @@ var userChoice = prompt("Do you choose rock, paper or scissors?"); This line creates a variable called ```userChoice``` to represent the users response. -Question: _Why is this a terrible way to get user input?_ ###### 2. Get the computer's choice @@ -219,15 +219,14 @@ var computerChoice = Math.random(); Here we are setting a variable named ```computerChoice``` to the result of `Math.random()`. -Question: _How else can we get a random choice?_ ###### 3. Teach the computer rock, paper, scissors. -This is our first conditional statement. +This is our first conditional statement. We change the value of ```computerChoice``` to either rock, paper, or scissors depending on what number the ```computerChoice``` -variable gets set to when we run the program. +variable gets set to when we run the program. Computers don't speak English (well, not exactly), so we need to speak in a language they understand: numbers. @@ -242,10 +241,11 @@ if (computerChoice <= 0.33) { } ``` -At this point the computer is ready to rumble with it's choice, and the user has made theirs. +At this point the computer is ready to rumble with it's choice, and the user has made theirs. -**IT'S GO TIME!!! (Not so fast, bub.)** -First we need to tell the computer how to decide who wins. +**IT'S GO TIME!!!** + +First we need to tell the computer how to decide who wins. In order to do that, we're going to need to create a function! @@ -281,7 +281,7 @@ var compare = function(userChoice, computerChoice) { ###### 4.5 Calling the compare function -We're passing values of userChoice and computerChoice to run the equation. +We're passing values of userChoice and computerChoice to run the equation. The function is called when someone clicks the button via the ```onclick``` attribute! diff --git a/index.html b/index.html index d326643..a99a347 100644 --- a/index.html +++ b/index.html @@ -2,62 +2,76 @@ - - else if(userChoice==="scissors") { - if (computerChoice==="rock") { - window.alert("Scissors wins!"); - } else { - window.alert("scissors wins"); - } - } - }; -

Learn to Code JavaScript

If you see a white button below, you're in good shape!

- +

Brought to you by your friends at Galvanize.

-
+
diff --git a/script.js b/script.js new file mode 100644 index 0000000..67c2e5b --- /dev/null +++ b/script.js @@ -0,0 +1,41 @@ +var randomNum = Math.random(); +var computerThrow = " "; + + +if (randomNum <= 0.33) { + computerThrow = "rock"; + } else if (randomNum <= 0.66) { + computerThrow = "paper"; + } else { + computerThrow = "scissors"; + } + + + + + +var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if(computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } + } +}; + +console.log(compare (userThrow, computerThrow)); From 4b369d4b2c4616865f29596499edc3e7a59bc443 Mon Sep 17 00:00:00 2001 From: Kim Schlesinger Date: Wed, 11 May 2016 09:14:42 -0600 Subject: [PATCH 02/10] changed overview to learning objectives --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2fe8d17..019293c 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ Brought to you by Galvanize. Learn more about the way we teach code at [galvanize.com](http://galvanize.com). -### Overview +### Learning Objectives -In this course, we'll be going over the following! +By the end of this workshop, you will be able to... - Basic syntax of JavaScript - Variables and Functions From a1179501b8d8e7f0a7f160ea18a2572008129c6e Mon Sep 17 00:00:00 2001 From: Kim Schlesinger Date: Wed, 11 May 2016 14:19:14 -0600 Subject: [PATCH 03/10] cleaned up MD file, and put solution code in script.js --- README.md | 128 +++++++++++++++++++++++++++++------------------------ index.html | 48 +------------------- script.js | 28 +++++++----- 3 files changed, 88 insertions(+), 116 deletions(-) diff --git a/README.md b/README.md index 019293c..040af85 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,18 @@ Brought to you by Galvanize. Learn more about the way we teach code at [galvaniz By the end of this workshop, you will be able to... -- Basic syntax of JavaScript -- Variables and Functions -- Conditional statements (if, else if, else) -- Build a “Rock, Paper, Scissors” application +- Write JavaScript code in a text editor +- Explore code using Chrome Developer Tools +- Describe and use the following primitive data types: + - Strings + - Numbers + - Booleans +- Describe and use the following operators: + - Assignment + - Comparison +- Write a JavaScript function +- Use a conditional statement to control the flow of a program +- Build a “Rock, Paper, Scissors” application using primitive data types, operations, functions and conditional statements While not required, reviewing our [HTML & CSS](https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS) course can help! @@ -27,7 +35,7 @@ Making its first appearance in 1995, JavaScript was created by an engineer at Ne JavaScript allows web pages to do more than just “sit there." You can animate, calculate, etc. - you can do it all! It is a great programming bridge between “design” and “development” that allows for endless creativity. -Common confusion: JavaScript is **NOT** JavaScript. They are largely different programming languages and should not be confused with one another. +Common confusion: JavaScript is **NOT** Java. They are largely different programming languages and should not be confused with one another. ### A Quick Mini-Tutorial @@ -74,9 +82,9 @@ What is the value of `total`? - “” - undefined value - Functions - here we go…! -#### Gut check! +#### Check for Understanding! -What's the difference between `=`,`==`, and `===`? I see this all the time. +What's the difference between `=`,`==`, and `===`? #####`=` is known as the **assignment operator** @@ -135,7 +143,7 @@ if (hour < 18) { greeting = "Good day"; } ``` -if statements by themselves default to `True`. +if statements by themselves default to `true`. ###### Else Statements @@ -187,106 +195,110 @@ Time for us to make our *Rock, Paper, Scissors* application! 1. Get the user's name 1. Get the user's throw: either rock, paper, or scissors -1. Have the computer generate a random number between 0-1. +1. Have the computer generate a random number between 0.01-0.99. 1. Use a conditional statement to assign rock, paper, and scissors to the computer's random number 1. Compare the user's throw and the computer's throw, and tell the user who won -###### 1. Get the user's choice +###### 1. Get the user's name -**Assign a `prompt` method to the variable `userChoice`:** +**Assign a `prompt` method to the variable `userName`:** The ```prompt``` method gets input from the user, ```prompt``` has an optional message parameter which you can use to ask the user for a response. ```javascript -var userChoice = prompt("Do you choose rock, paper or scissors?"); +var userName = prompt("What is your name?"); ``` -This line creates a variable called ```userChoice``` to represent the users response. +###### 2. Get the user's throw: either rock, paper, or scissors +**Assign a `prompt` method to the variable `userThrow`:** + + +```javascript +var userThrow = prompt("rock, paper or scissors?"); +``` + +This line creates a variable called ```userThrow``` to represent the users response. -###### 2. Get the computer's choice -Assign a `Math.random()` method to the variable `computerChoice`: +###### 3. 1. Have the computer generate a random number between 0-1. + +Assign a `Math.random()` method to the variable `randomNum`: What is `Math` in JavaScript? ```Math.random()``` returns a random floating point number between 0 and 1. ```javascript -var computerChoice = Math.random(); +var randomNum = Math.random(); ``` -Here we are setting a variable named ```computerChoice``` to the result of `Math.random()`. +Here we are setting a variable named ```randomNum``` to the result of `Math.random()`. -###### 3. Teach the computer rock, paper, scissors. +###### 4. 1. Use a conditional statement to assign a throw of either rock, paper, and scissors to the computer's random number This is our first conditional statement. -We change the value of ```computerChoice``` -to either rock, paper, or scissors depending on what number the ```computerChoice``` +We assign the value of ```computerThrow``` +to either rock, paper, or scissors depending on what number the ```randomNum``` variable gets set to when we run the program. Computers don't speak English (well, not exactly), so we need to speak in a language they understand: numbers. ```javascript - -if (computerChoice <= 0.33) { - computerChoice = "rock"; -} else if (computerChoice <= 0.66) { - computerChoice = "paper"; -} else { - computerChoice = "scissors"; -} + if (randomNum <= 0.33) { + computerThrow = "rock"; + } else if (randomNum <= 0.66) { + computerThrow = "paper"; + } else { + computerThrow = "scissors"; + } ``` At this point the computer is ready to rumble with it's choice, and the user has made theirs. -**IT'S GO TIME!!!** -First we need to tell the computer how to decide who wins. -In order to do that, we're going to need to create a function! +###### 5. Compare the user's throw and the computer's throw, and tell the user who won - -###### 4. Compare the choices and tell the user of the result. Here we're creating a function called ```compare```. The ```compare``` function takes two -arguments ```choice1``` and ```choice2```. +arguments ```userThrow``` and ```computerThrow```. ```javascript -var compare = function(userChoice, computerChoice) { - if (userChoice === computerChoice) { - window.alert("The result is a tie!"); - } else if(userChoice === "rock") { - if (computerChoice === "scissors") { - window.alert("Rock wins!"); - } else { - window.alert("Paper wins"); - } - } else if(userChoice === "paper") { - if(computerChoice === "rock") { - window.alert("paper wins!"); - } else { - window.alert("scissors wins!"); - } - } else if(userChoice === "scissors") { - if (computerChoice === "rock") { - window.alert("Rock wins"); - } else { - window.alert("scissors wins"); - } + var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if(computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } } -}; + }; ``` -###### 4.5 Calling the compare function +###### 6 Call the compare function We're passing values of userChoice and computerChoice to run the equation. The function is called when someone clicks the button via the ```onclick``` attribute! ```html - + ``` ### Play around in the sandbox some more! diff --git a/index.html b/index.html index a99a347..da2121a 100644 --- a/index.html +++ b/index.html @@ -7,56 +7,10 @@ 1. Get the user's throw: either rock, paper, or scissors 1. Have the computer generate a random number between 0.01-0.99. 1. Use a conditional statement to assign rock, paper, and scissors to the computer's random number - 1. Compare the user's choice and computer's choice, and tell the user who one --> + 1. Compare the user's choice and computer's choice, and tell the user who won --> diff --git a/script.js b/script.js index 67c2e5b..94fa6e6 100644 --- a/script.js +++ b/script.js @@ -1,18 +1,26 @@ -var randomNum = Math.random(); -var computerThrow = " "; +// +var userName = prompt("What is your name?"); +// -if (randomNum <= 0.33) { - computerThrow = "rock"; - } else if (randomNum <= 0.66) { - computerThrow = "paper"; - } else { - computerThrow = "scissors"; - } +var userThrow = prompt("Rock, Paper, or Scissors?") + +var randomNum = Math.random(); +var computerThrow = " "; + +// +if (randomNum <= 0.33) { + computerThrow = "rock"; +} else if (randomNum <= 0.66) { + computerThrow = "paper"; +} else { + computerThrow = "scissors"; +} +// --> var compare = function (userThrow, computerThrow) { if (userThrow === computerThrow) { @@ -37,5 +45,3 @@ var compare = function (userThrow, computerThrow) { } } }; - -console.log(compare (userThrow, computerThrow)); From 7f0cae07c8956e597d8d6bf0edbb9d1dd1c3a292 Mon Sep 17 00:00:00 2001 From: Kim Schlesinger Date: Thu, 12 May 2016 11:44:14 -0600 Subject: [PATCH 04/10] added instructions re: script.js --- script.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 94fa6e6..94b2c2c 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,5 @@ +// Note: place this solution in between the tags in your index.html file + // var userName = prompt("What is your name?"); @@ -5,7 +7,7 @@ var userName = prompt("What is your name?"); var userThrow = prompt("Rock, Paper, or Scissors?") - +// Have the computer generate a random number between 0-1. var randomNum = Math.random(); var computerThrow = " "; From ab0f7c4645f714b209846f67ffa6d6d27806f483 Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 13:45:02 -0700 Subject: [PATCH 05/10] wrapped the entire program in a runGame function --- README.md | 17 +++--------- index.html | 14 ++++------ script.js | 81 ++++++++++++++++++++++++++++-------------------------- 3 files changed, 52 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 040af85..02c7858 100644 --- a/README.md +++ b/README.md @@ -316,26 +316,17 @@ Want to learn more? Visit one of our nearby **Learn to Code** sessions or check - [Learn to Code HTML & CSS](https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS) - [Learn to Code Git and GitHub](https://github.com/GalvanizeOpenSource/Learn-To-Code-GitHub-Git) -You can also check out our evening courses at [galvanize.com/workshops](http://galvanize.com/workshops): +You can also check out our part-time courses at [galvanize.com/workshops](http://galvanize.com/workshops): -- **Zero to Web Designer in 8 Weeks** -- **Foundations in JavaScript in 8 Weeks** +- **Web Development Foundations with JavaScript** +- **Data Science Fundamentals: Intro to Python** If you're ready for a full-fledged immersive program, Galvanize offers the following: -**Galvanize Full Stack Immersive Program** +**Galvanize Web Development Immersive Program** - 24 Week Full-Time Program - 97% Job Placement Rate within six months - Average starting salary: $77,000 per annum - Scholarships available for those who qualify To learn more, email our enrollment department at enrollment@galvanize.com. - - -## About the Authors - -**Graham McBain** is a graduate of the 3rd cohort of the Galvanzie Full Stack Program and now Evangelist for Galvanize based in the Colorado area. Graham believes that programming is more accessible than people think and is passionate about showing people the path to becoming a developer. - -**Lee Ngo** is an evangelist for Galvanize based in Seattle. Previously he worked for UP Global (now Techstars) and founded his own ed-tech company in Pittsburgh, PA. Lee believes in learning by doing, engaging and sharing, and he teaches code through a combination of visual communication, teamwork, and project-oriented learning. - -You can email him at lee.ngo@galvanize.com for any further questions. diff --git a/index.html b/index.html index da2121a..f28fe27 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,13 @@ - @@ -18,7 +16,7 @@

Learn to Code JavaScript

If you see a white button below, you're in good shape!

- +

Brought to you by your friends at Galvanize.

diff --git a/script.js b/script.js index 94b2c2c..02bc0e4 100644 --- a/script.js +++ b/script.js @@ -1,49 +1,52 @@ // Note: place this solution in between the tags in your index.html file -// -var userName = prompt("What is your name?"); +function runGame() { -// + // + var userName = prompt("What is your name?"); -var userThrow = prompt("Rock, Paper, or Scissors?") + // + var userThrow = prompt("Rock, Paper, or Scissors?") -// Have the computer generate a random number between 0-1. -var randomNum = Math.random(); + // Have the computer generate a random number between 0-1. + var randomNum = Math.random(); -var computerThrow = " "; + var computerThrow = " "; -// + // -if (randomNum <= 0.33) { - computerThrow = "rock"; -} else if (randomNum <= 0.66) { - computerThrow = "paper"; -} else { - computerThrow = "scissors"; -} - -// --> + if (randomNum <= 0.33) { + computerThrow = "rock"; + } else if (randomNum <= 0.66) { + computerThrow = "paper"; + } else { + computerThrow = "scissors"; + } -var compare = function (userThrow, computerThrow) { - if (userThrow === computerThrow) { - window.alert("The result is a tie!") - } else if (userThrow === "rock") { - if(computerThrow === "scissors"){ - window.alert("Rock beats scissors! " + userName + " wins!") - } else { - window.alert("Paper beats rock! The computer wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } else if (computerThrow === "rock") { - window.alert("Paper beats rock!" + userName + " wins!") + // --> + + var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if(computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } } - } else if (userThrow === "paper") { - if(computerThrow === "rock") { - window.alert("Paper beats rock! " + userName + " wins!") - } else if (computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } - } -}; + }; + compare() +} From 9479bc6b13a74b316969bd834f501cb886a0c887 Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 13:54:49 -0700 Subject: [PATCH 06/10] debugging window.alert() --- index.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 51 --------------------------------------------------- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index f28fe27..31fc9c5 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,57 @@ // 3. Have the computer generate a random number between 0.01-0.99. // 4. Use a conditional statement to assign rock, paper, and scissors to the computer's random number // 5. Compare the user's choice and computer's choice, and tell the user who won + function runGame() { + + // + var userName = prompt("What is your name?"); + + // + var userThrow = prompt("Rock, Paper, or Scissors?") + + // Have the computer generate a random number between 0-1. + var randomNum = Math.random(); + + var computerThrow = ""; + + // + + if (randomNum <= 0.33) { + computerThrow = "rock"; + } else if (randomNum <= 0.66) { + computerThrow = "paper"; + } else { + computerThrow = "scissors"; + } + + // --> +console.log(userThrow + " user"); +console.log(computerThrow + " computer"); + var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if (computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } + } + } + compare() + }; diff --git a/script.js b/script.js index 02bc0e4..2c63e8e 100644 --- a/script.js +++ b/script.js @@ -1,52 +1 @@ // Note: place this solution in between the tags in your index.html file - -function runGame() { - - // - var userName = prompt("What is your name?"); - - // - var userThrow = prompt("Rock, Paper, or Scissors?") - - // Have the computer generate a random number between 0-1. - var randomNum = Math.random(); - - var computerThrow = " "; - - // - - if (randomNum <= 0.33) { - computerThrow = "rock"; - } else if (randomNum <= 0.66) { - computerThrow = "paper"; - } else { - computerThrow = "scissors"; - } - - // --> - - var compare = function (userThrow, computerThrow) { - if (userThrow === computerThrow) { - window.alert("The result is a tie!") - } else if (userThrow === "rock") { - if(computerThrow === "scissors"){ - window.alert("Rock beats scissors! " + userName + " wins!") - } else { - window.alert("Paper beats rock! The computer wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } else if (computerThrow === "rock") { - window.alert("Paper beats rock!" + userName + " wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "rock") { - window.alert("Paper beats rock! " + userName + " wins!") - } else if (computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } - } - }; - compare() -} From cf8470d14e0b71a1fbde8db94d6d1c1187fdb2ef Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 17:14:57 -0700 Subject: [PATCH 07/10] updated code --- README.md | 51 +++++++++++++++++++++++++++------------------------ index.html | 51 --------------------------------------------------- script.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 02c7858..4c148e1 100644 --- a/README.md +++ b/README.md @@ -215,7 +215,7 @@ var userName = prompt("What is your name?"); ```javascript -var userThrow = prompt("rock, paper or scissors?"); +var userThrow = prompt("Rock, Paper or Scissors?"); ``` This line creates a variable called ```userThrow``` to represent the users response. @@ -266,29 +266,31 @@ Here we're creating a function called ```compare```. The ```compare``` function arguments ```userThrow``` and ```computerThrow```. ```javascript - var compare = function (userThrow, computerThrow) { - if (userThrow === computerThrow) { - window.alert("The result is a tie!") - } else if (userThrow === "rock") { - if(computerThrow === "scissors"){ - window.alert("Rock beats scissors! " + userName + " wins!") - } else { - window.alert("Paper beats rock! The computer wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } else if (computerThrow === "rock") { - window.alert("Paper beats rock!" + userName + " wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "rock") { - window.alert("Paper beats rock! " + userName + " wins!") - } else if (computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } +var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if(computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") } - }; + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } + } +} +//Invoke the compare function +compare(userThrow, computerThrow) ``` @@ -298,7 +300,8 @@ We're passing values of userChoice and computerChoice to run the equation. The function is called when someone clicks the button via the ```onclick``` attribute! ```html - + + ``` ### Play around in the sandbox some more! diff --git a/index.html b/index.html index 31fc9c5..f28fe27 100644 --- a/index.html +++ b/index.html @@ -9,57 +9,6 @@ // 3. Have the computer generate a random number between 0.01-0.99. // 4. Use a conditional statement to assign rock, paper, and scissors to the computer's random number // 5. Compare the user's choice and computer's choice, and tell the user who won - function runGame() { - - // - var userName = prompt("What is your name?"); - - // - var userThrow = prompt("Rock, Paper, or Scissors?") - - // Have the computer generate a random number between 0-1. - var randomNum = Math.random(); - - var computerThrow = ""; - - // - - if (randomNum <= 0.33) { - computerThrow = "rock"; - } else if (randomNum <= 0.66) { - computerThrow = "paper"; - } else { - computerThrow = "scissors"; - } - - // --> -console.log(userThrow + " user"); -console.log(computerThrow + " computer"); - var compare = function (userThrow, computerThrow) { - if (userThrow === computerThrow) { - window.alert("The result is a tie!") - } else if (userThrow === "rock") { - if (computerThrow === "scissors"){ - window.alert("Rock beats scissors! " + userName + " wins!") - } else { - window.alert("Paper beats rock! The computer wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } else if (computerThrow === "rock") { - window.alert("Paper beats rock!" + userName + " wins!") - } - } else if (userThrow === "paper") { - if(computerThrow === "rock") { - window.alert("Paper beats rock! " + userName + " wins!") - } else if (computerThrow === "scissors") { - window.alert("Scissors beats paper! The computer wins!") - } - } - } - compare() - }; diff --git a/script.js b/script.js index 2c63e8e..da9ae29 100644 --- a/script.js +++ b/script.js @@ -1 +1,50 @@ // Note: place this solution in between the tags in your index.html file + +function runGame() { + +// 1. Get the user's name + var userName = prompt("What is your name?"); + +// 2. Get the user's throw: either rock, paper, or scissors + var userThrow = prompt("Rock, Paper, or Scissors?") + +// 3. Have the computer generate a random number between 0.01-0.99. + var randomNum = Math.random(); + + var computerThrow = ""; + +// 4. Use a conditional statement to assign rock, paper, and scissors to the computer's random number + if (randomNum <= 0.33) { + computerThrow = "rock"; + } else if (randomNum <= 0.66) { + computerThrow = "paper"; + } else { + computerThrow = "scissors"; + } + +// 5. Compare the user's choice and computer's choice, and tell the user who won + var compare = function (userThrow, computerThrow) { + if (userThrow === computerThrow) { + window.alert("The result is a tie!") + } else if (userThrow === "rock") { + if(computerThrow === "scissors"){ + window.alert("Rock beats scissors! " + userName + " wins!") + } else { + window.alert("Paper beats rock! The computer wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } else if (computerThrow === "rock") { + window.alert("Paper beats rock!" + userName + " wins!") + } + } else if (userThrow === "paper") { + if(computerThrow === "rock") { + window.alert("Paper beats rock! " + userName + " wins!") + } else if (computerThrow === "scissors") { + window.alert("Scissors beats paper! The computer wins!") + } + } + } + compare(userThrow, computerThrow) +}; From 825fd7acc94d275a572d9e56163b3826460514c8 Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 17:20:52 -0700 Subject: [PATCH 08/10] added link to wdi page --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4c148e1..dfd0f2b 100644 --- a/README.md +++ b/README.md @@ -326,7 +326,7 @@ You can also check out our part-time courses at [galvanize.com/workshops](http:/ If you're ready for a full-fledged immersive program, Galvanize offers the following: -**Galvanize Web Development Immersive Program** +[**Galvanize Web Development Immersive Program**](https://new.galvanize.com/austin/web-development) - 24 Week Full-Time Program - 97% Job Placement Rate within six months - Average starting salary: $77,000 per annum From 472698baf5d560051d956b376fb0b530fb3054e2 Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 17:50:06 -0700 Subject: [PATCH 09/10] changed directions for how to download zip --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dfd0f2b..c7baad5 100644 --- a/README.md +++ b/README.md @@ -184,8 +184,7 @@ _Is there any other way to do this?_ Time for us to make our *Rock, Paper, Scissors* application! -1. Go to: https://github.com/GalvanizeOpenSource/Learn-To-Code-JavaScript/ -1. Download the zip file of our code +1. Go to the top of this page, click the green 'download' button and select DOWNLOAD ZIP 1. Open the files in your text editor a. index.html b. CSS/style.css @@ -326,7 +325,7 @@ You can also check out our part-time courses at [galvanize.com/workshops](http:/ If you're ready for a full-fledged immersive program, Galvanize offers the following: -[**Galvanize Web Development Immersive Program**](https://new.galvanize.com/austin/web-development) +[**Galvanize Web Development Immersive Program**](https://new.galvanize.com/austin/web-development ) - 24 Week Full-Time Program - 97% Job Placement Rate within six months - Average starting salary: $77,000 per annum From 405a821cb47aba198c2eca8df35d4b97fb44ffc1 Mon Sep 17 00:00:00 2001 From: coloradokim Date: Mon, 13 Feb 2017 19:30:41 -0700 Subject: [PATCH 10/10] added runGame function to html script tag --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index f28fe27..f4ab177 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,13 @@