├── .gitignore ├── LICENSE ├── README.md ├── css └── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Galvanize Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # learn-to-code-week-2 2 | During this workshop, you learn enough JavaScript to build a simple version of [Rock, Paper, Scissors](https://en.wikipedia.org/wiki/Rock-paper-scissors). Yes, this is a game involving (wo)man vs machine! [John Connor](https://en.wikipedia.org/wiki/John_Connor) is on your side; I can't say the same for [Arnold](https://en.wikipedia.org/wiki/Terminator_\(character\)). 3 | 4 | To build your game, you'll need to complete these three steps: 5 | 6 | 1. Understand the purpose of JavaScript? 7 | 2. Learn enough JavaScript to build Rock, Paper, Scissors. 8 | 3. Define and complete the tasks for building our game. 9 | 10 | If you are doing this work at home and have any quesions, please contact [Graham McBain](mcbain@galvanize.com). 11 | 12 | ###HOORAY VOCABULARY! 13 | 14 | - functions 15 | - if statements 16 | - variables 17 | 18 | ###Rock Paper Scissors! 19 | 20 | We want to write a program called rockPaperScissors.js so we can play rock paper 21 | scissors with our computer! Here are the steps we'll need to take to make that happen: 22 | 23 | 1. Get a user's choice 24 | 1. Get the computer's choice 25 | 1. Teach the computer how to guess rock, paper, or scissors 26 | 1. Compare their choices and tell the user the result 27 | 28 | 29 | ###1.Get the user's choice 30 | 31 | 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. 32 | 33 | ```javascript 34 | var userChoice = prompt("Do you choose rock, paper or scissors?"); 35 | ``` 36 | 37 | This line creates a variable called ```userChoice``` to represent the users response. 38 | 39 | ####Question: 40 | Why is this a terrible way to get the users input? 41 | 42 | ####Question: 43 | What are some ways you could avoid this problem? 44 | 45 | 46 | ###2.Get the computers choice 47 | ```Math.random()``` returns a random floating point number between 0 and 1 48 | 49 | ```javascript 50 | var computerChoice = Math.random(); 51 | ``` 52 | 53 | Here we are setting a variable named ```computerChoice``` to the result of Math.random() 54 | 55 | ####Question: 56 | If you did't want to have ```Math.Random()``` choose between 0 & 1 how could you give it 57 | alternative Parameters? 58 | 59 | 60 | ###3. Teach the computer rock, paper, scissors. 61 | 62 | This is our first conditional statement. We change the value of ```computerChoice``` 63 | to either rock, paper, or scissors depending on what number the ```computerChoice``` 64 | variable gets set to when we run the program. Computers don't speak english so 65 | we need to speak in a language they understand, numbers. 66 | 67 | ```javascript 68 | 69 | if (computerChoice <= 0.33) { 70 | computerChoice = "rock"; 71 | } else if (computerChoice <= 0.66) { 72 | computerChoice = "paper"; 73 | } else { 74 | computerChoice = "scissors"; 75 | } 76 | ``` 77 | 78 | 79 | 80 | //At this point the computer is ready to rumble with it's choice, and the user 81 | //has made theirs. IT'S GO TIME!!! 82 | //Not so fast bub, first we need to tell the computer how to decide who wins. In 83 | //order to do that we're going to need to create a function! 84 | 85 | ####Question: 86 | If the computers choice is ```0.44``` why does this statement assign ```computerChoice``` 87 | not evaluate to paper? Afterall, ```0.44``` is less than or equal to ```0.66``` 88 | 89 | 90 | ###4. Compare the choices and tell the user of the result. 91 | Here we're creating a function called ```compare```. The ```compare``` function takes two 92 | arguments ```userChoice``` and ```computerChoice```. 93 | 94 | ```javascript 95 | var compare = function(userChoice, computerChoice) { 96 | if (userChoice === computerChoice) { 97 | alert("The result is a tie!"); 98 | } else if(userChoice === "rock") { 99 | if (computerChoice === "scissors") { 100 | alert("Rock wins!"); 101 | } else { 102 | alert("Paper wins"); 103 | } 104 | } else if(userChoice === "paper") { 105 | if(computerChoice === "rock") { 106 | alert("paper wins!"); 107 | } else { 108 | alert("scissors wins!"); 109 | } 110 | } else if(userChoice === "scissors") { 111 | if (computerChoice === "rock") { 112 | alert("Rock wins"); 113 | } else { 114 | alert("scissors wins"); 115 | } 116 | } 117 | }; 118 | ``` 119 | 120 | ####Question: 121 | At this point in the program we've got the userChoice and computerChoice, we've also 122 | written a function that compares the two, what is the last thing we have to do to make this program 123 | run? 124 | 125 | ###5. Calling the compare function 126 | We're passing values of userChoice and computerChoice to run the equation. The 127 | function is called when someone clicks the button via the ```onclick``` attribute! 128 | 129 | ```html 130 | 131 | ``` 132 | 133 | ###6. The customer has some requests 134 | 135 | - "I want to play the game again, make a button I can press to play again!" 136 | 137 | - "When I win I want the game to congratulate me by name!" 138 | 139 | - "I don't ever want to loose, make it so I always win." 140 | 141 | - "I don't want to have to click a button to play, make it so ```compare``` just runs when I enter 142 | my choice" 143 | 144 | ### [MIT Licensed](LICENSE) 145 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | text-align: center; 3 | } 4 | 5 | .button { 6 | position: relative; 7 | top: 50%; 8 | width: 200px; 9 | height: 100px; 10 | display: inline-block; 11 | } 12 | 13 | 14 | html { 15 | background: url("some_url_to_an_image") no-repeat center center fixed; 16 | -webkit-background-size: cover; 17 | -moz-background-size: cover; 18 | -o-background-size: cover; 19 | background-size: cover; 20 | } 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock, Paper, Scissors 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | --------------------------------------------------------------------------------