Created
December 1, 2017 00:00
-
-
Save xavi-/da837a19f412ea0d280ab52b56f639a0 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=da837a19f412ea0d280ab52b56f639a0
This file contains hidden or 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>Rock Paper Scissors Checker</title> | |
| </head> | |
| <body> | |
| <h1>Step 1: Complete this logic chart</h1> | |
| <p> Hint: In the HTML look for #completeLogicOne and #completeLogicTwo to find where you can write the results.</p> | |
| <table> | |
| <tr> | |
| <th></th> | |
| <th id="user-choice" colspan="4">User choice</th> | |
| </tr> | |
| <tr> | |
| <th id="computer-choice" rowspan="4">Computer choice</th> | |
| <th></th> | |
| <th>Rock</th> | |
| <th>Paper</th> | |
| <th>Scissors</th> | |
| </tr> | |
| <tr> | |
| <th>Rock</th> | |
| <td>result: Tie </td> | |
| <td>result: You Win </td> | |
| <td>result: Computer Wins </td> | |
| </tr> | |
| <tr id="completeLogicOne"> | |
| <th >Paper</th> | |
| <td>result: </td> | |
| <td>result: </td> | |
| <td>result: </td> | |
| </tr> | |
| <tr id="completeLogicTwo"> | |
| <th>Scissors</th> | |
| <td>result: </td> | |
| <td>result: </td> | |
| <td>result: </td> | |
| </tr> | |
| </table> | |
| <h1>Step 2: Complete the Conditional Statement in the JavaScript according to the results of the logic chart above</h1> | |
| <p> | |
| Player1: <input id="player-1"> | |
| </p> | |
| <p> | |
| Player2: <input id="player-2"> | |
| </p> | |
| <p> | |
| <button>Who's the winner?</button> | |
| </p> | |
| <p id="winner">No one yet!</p> | |
| </body> | |
| </html> |
This file contains hidden or 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
| {"enabledLibraries":["jquery"]} |
This file contains hidden or 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
| // This clicker handler checks the values of the inputs, | |
| // determines the winnder (using if-statements), and shows | |
| // the winner on the page. | |
| $("button").click(function(){ | |
| // get the value of player choices | |
| var player1 = $("#player-1").val(); | |
| var player2 = $("#player-2").val(); | |
| var winnerText = "not sure yet"; | |
| // determine who won | |
| // to do: fill in the other possibilities | |
| if(player1 === "rock" && player2 === "rock") { | |
| winnerText = "It's a tie!"; | |
| } /* else if (...) { | |
| Add conditionals for all the other possibilities | |
| } */ | |
| // show the winner text on the page | |
| $("#winner").text(winnerText); | |
| }); |
This file contains hidden or 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
| table { | |
| font-family: arial, sans-serif; | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| td, th { | |
| border: 1px solid #dddddd; | |
| text-align: left; | |
| padding: 8px; | |
| } | |
| #user-choice, #computer-choice { | |
| text-align: center; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment