Skip to content

Instantly share code, notes, and snippets.

@timkellogg

timkellogg/index.html

Created December 5, 2014 20:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timkellogg/dc2fbaece44ae1bcea29 to your computer and use it in GitHub Desktop.
Save timkellogg/dc2fbaece44ae1bcea29 to your computer and use it in GitHub Desktop.
Download ZIP
Ping Pong Epicodus Test
Raw
index.html
<!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>&copy;2014</p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Raw
scripts.js
// 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
Raw
styles.css
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