Created
April 24, 2017 02:04
-
-
Save sarahzinger/97162c233d182ebd343039523af7c0ab to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=97162c233d182ebd343039523af7c0ab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Dice Roll Game</title> | |
| </head> | |
| <body> | |
| <h1>Dice Roller</h1> | |
| <div class="dice-1" id="first-die"></div> | |
| <div class="dice-2" id="second-die"></div> | |
| <button>Roll the Dice</button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Rolling the dice! | |
| // Step 1: Create a click handler that calls the rolldice function when you click on the button! | |
| function rolldice(){ | |
| // Step 2: When the roll dice function is called create 2 random numbers between 1-6 and set them as the value for dice1 and dice2 | |
| // var dice1 = ? | |
| // var dice2 = ? | |
| // Step 3: Finish writing this if/else conditional, so that | |
| // it will remove any old CSS classes and add the right CSS class | |
| // which will display the right background image | |
| // if (dice1 === 1) { | |
| // $("#first-die").removeClass(); | |
| // $("#first-die").addClass("dice-1"); | |
| // } else if ( | |
| // Step 4: Make second-die change too | |
| // Nearly done! By now you should be able to click "Roll the Dice" and see | |
| // the first die change. How can you make the second Die change to a | |
| // random number? | |
| } | |
| // Bonus Challenges! | |
| // 1. Alert the user if the two dice are the same number! | |
| // 2. Add up how much the dice are together and display that number to the user | |
| // 3. Style the page so it looks more exciting with different colors or animation. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #first-die { | |
| width: 100px; | |
| height: 100px; | |
| display: inline-block; | |
| } | |
| #second-die { | |
| width: 100px; | |
| height: 100px; | |
| display: inline-block; | |
| } | |
| .dice-1 { | |
| background-image: url("https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/1.png"); | |
| } | |
| .dice-2 { | |
| background-image: url('https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/2.png'); | |
| } | |
| .dice-3 { | |
| background-image: url('https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/3.png'); | |
| } | |
| .dice-4 { | |
| background-image: url('https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/4.png'); | |
| } | |
| .dice-5 { | |
| background-image: url('https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/5.png'); | |
| } | |
| .dice-6 { | |
| background-image: url('https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/6.png'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment