Created
December 5, 2014 20:31
-
-
Save timkellogg/dc2fbaece44ae1bcea29 to your computer and use it in GitHub Desktop.
Ping Pong Epicodus Test
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> | |
| <head> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" type="text/css" href="styles/styles.css"> | |
| <title>PingPongPage</title> | |
| </head> | |
| <body> | |
| <h1>Ping Pong Page</h1> | |
| <div class = "container"> | |
| <button class="btn" onclick="numberGame()">Play!</button> | |
| </div> | |
| <div class = "output"><div> | |
| <p>©2014</p> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="scripts.js"></script> | |
| </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
| // Version 1.0 On Page Load | |
| // $(document).ready(function () { | |
| // var number = prompt("What number would you like me to ping-pong up to?"); | |
| // for (i = 1; i <= number; i++) { | |
| // if (i % 15 == 0) { | |
| // document.write('<br>' + i + " Ping-pong"); | |
| // } else if (i % 5 == 0) { | |
| // document.write('<br>' + i + " Pong"); | |
| // } else if (i % 15 == 0) { | |
| // document.write('<br>' + i + " Ping"); | |
| // } else { | |
| // document.write('<br>' + i); | |
| // } | |
| // } //end for loop | |
| // }); //end all | |
| //Version 2.0 On Button Click | |
| // numberGame = function () { | |
| // var number = prompt("What number would you like me to ping-pong up to?"); | |
| // for (i = 1; i <= number; i++) { | |
| // if (i % 15 == 0) { | |
| // document.write('<br>' + i + " Ping-pong"); | |
| // } else if (i % 5 == 0) { | |
| // document.write('<br>' + i + " Pong"); | |
| // } else if (i % 3 == 0) { | |
| // document.write('<br>' + i + " Ping"); | |
| // } else { | |
| // document.write('<br>' + i); | |
| // } | |
| // } //end for loop | |
| // }; //end all | |
| //Version 3.0 Writing to Div | |
| numberGame = function () { | |
| var number = prompt("What number would you like me to ping-pong up to?"); | |
| $('.btn').html("Restart").css('font-family', 'Open Sans'); | |
| $('.output').html('<h3>Here is the result:</h3>'); | |
| $('.output').css("background-color", "#FAEBD7"); | |
| for (i = 1; i <= number; i++) { | |
| if (i % 15 == 0) { | |
| $('.output').append('<br>' + i + " Ping-pong"); | |
| } else if (i % 5 == 0) { | |
| $('.output').append('<br>' + i + " Pong"); | |
| } else if (i % 3 == 0) { | |
| $('.output').append('<br>' + i + " Ping"); | |
| } else { | |
| $('.output').append('<br>' + i); | |
| } | |
| } //end for loop | |
| }; //end all |
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
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| h1 { | |
| text-align: center; | |
| letter-spacing: .2em; | |
| } | |
| .container { | |
| width: 98%; | |
| margin: 0 auto; | |
| } | |
| .output { | |
| width: 98%; | |
| margin-top: 20px; | |
| margin-left: 15px; | |
| } | |
| .btn { | |
| text-align: center; | |
| background: #3498db; | |
| background-image: -webkit-linear-gradient(top, #3498db, #2980b9); | |
| background-image: -moz-linear-gradient(top, #3498db, #2980b9); | |
| background-image: -ms-linear-gradient(top, #3498db, #2980b9); | |
| background-image: -o-linear-gradient(top, #3498db, #2980b9); | |
| background-image: linear-gradient(to bottom, #3498db, #2980b9); | |
| -webkit-border-radius: 28; | |
| -moz-border-radius: 28; | |
| border-radius: 28px; | |
| color: #ffffff; | |
| font-size: 20px; | |
| padding: 10px 20px 10px 20px; | |
| text-decoration: none; | |
| } | |
| .btn:hover { | |
| background: #3cb0fd; | |
| background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); | |
| background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); | |
| background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); | |
| background-image: -o-linear-gradient(top, #3cb0fd, #3498db); | |
| background-image: linear-gradient(to bottom, #3cb0fd, #3498db); | |
| text-decoration: blink; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment