codeithuman/ping-pong.html

## ping-pong.html
<!DOCTYPE html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<title>Ping-Pong Program by AJ Robertson</title>
</head>
<body>
	<style>
		body {
			font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
			font-size: 0.9em;
			text-align: center;
		}
		.page {
			margin: 0 auto;
			max-width: 21em;
			padding: 0.5em;
		}
		.header p {
			margin-bottom: 2em;
			text-align: justify;
		}
		label {
			display: block;
		}
		input {
			display: block;
			width: 100%;
		}
		input,
		label {
			font-size: 1.4em;
			margin-bottom: 0.5em;
		}
		.button {
			background-color: #31F7B2;
			border: 1px solid #3DD49F;
			display: block;
			margin: 0.5em auto;
			padding: 0.5em 1em;
			width: 50%;
		}
	</style>
	<script>
	$(document).ready(function() {
		var submitButton = $('.button_submit'),
			input = $('.pingPong'),
			inputVal,
			validation = $('.validation'),
			results = $('.results');

		submitButton.on("click", function() {
			validation.text('');
			results.text('');

			inputVal = input.val();

			var isTypeNumber = ! isNaN(parseInt(inputVal));
			var isWholeNumberGreatThanZero = Math.floor(inputVal) == inputVal && inputVal > 0;
			if (isTypeNumber && isWholeNumberGreatThanZero) {
				for (var i = 1; i <= inputVal; ++i) {
					pingPongBuilder(results, pingPong(i));
				}
			}
			else {
				validation.text('Please enter a whole number greater than zero.');
				input.focus();
			}

		})
	});

	function pingPong(n) {
		var divisibleBy3 = n % 3 == 0,
			divisibleBy5 = n % 5 == 0;

		if (divisibleBy3 && ! divisibleBy5)
			return "Ping";
		else if (divisibleBy5 && ! divisibleBy3)
			return "Pong";
		else if (divisibleBy3 && divisibleBy5)
			return "Ping-Pong";
		else
			return n;
	}

	function pingPongBuilder(element, string) {
		element.append(string + " ");
	}

	</script>
	<div class="page">
		<div class="header">
			<h1>Ping-Pong</h1>
			<p>
				This program takes in a number (<i>n</i>) and then prints
				1 through the number (1 - <i>n</i>). For multiples of 3 the
				program prints "Ping". For multipes 5 the program prints
				"Pong". And for multipes of 3 AND 5, the program prints
				"Ping-Pong".
			</p>
		</div>
		<div class="program">
			<label for="number">Please enter a number</label>
			<input class="pingPong" type="text" name="number" />
			<div class="button button_submit">Submit</div>
			<div><p class="validation"></p></div>
		</div>
		<div>
			<p class="results"></p>
		</div>
	</div>
</body>
	<!DOCTYPE html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<title>Ping-Pong Program by AJ Robertson</title>
	</head>
	<body>
	<style>
	body {
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 0.9em;
	text-align: center;
	}
	.page {
	margin: 0 auto;
	max-width: 21em;
	padding: 0.5em;
	}
	.header p {
	margin-bottom: 2em;
	text-align: justify;
	}
	label {
	display: block;
	}
	input {
	display: block;
	width: 100%;
	}
	input,
	label {
	font-size: 1.4em;
	margin-bottom: 0.5em;
	}
	.button {
	background-color: #31F7B2;
	border: 1px solid #3DD49F;
	display: block;
	margin: 0.5em auto;
	padding: 0.5em 1em;
	width: 50%;
	}
	</style>
	<script>
	$(document).ready(function() {
	var submitButton = $('.button_submit'),
	input = $('.pingPong'),
	inputVal,
	validation = $('.validation'),
	results = $('.results');

	submitButton.on("click", function() {
	validation.text('');
	results.text('');

	inputVal = input.val();

	var isTypeNumber = ! isNaN(parseInt(inputVal));
	var isWholeNumberGreatThanZero = Math.floor(inputVal) == inputVal && inputVal > 0;
	if (isTypeNumber && isWholeNumberGreatThanZero) {
	for (var i = 1; i <= inputVal; ++i) {
	pingPongBuilder(results, pingPong(i));
	}
	}
	else {
	validation.text('Please enter a whole number greater than zero.');
	input.focus();
	}

	})
	});

	function pingPong(n) {
	var divisibleBy3 = n % 3 == 0,
	divisibleBy5 = n % 5 == 0;

	if (divisibleBy3 && ! divisibleBy5)
	return "Ping";
	else if (divisibleBy5 && ! divisibleBy3)
	return "Pong";
	else if (divisibleBy3 && divisibleBy5)
	return "Ping-Pong";
	else
	return n;
	}

	function pingPongBuilder(element, string) {
	element.append(string + " ");
	}

	</script>
	<div class="page">
	<div class="header">
	<h1>Ping-Pong</h1>
	<p>
	This program takes in a number (<i>n</i>) and then prints
	1 through the number (1 - <i>n</i>). For multiples of 3 the
	program prints "Ping". For multipes 5 the program prints
	"Pong". And for multipes of 3 AND 5, the program prints
	"Ping-Pong".
	</p>
	</div>
	<div class="program">
	<label for="number">Please enter a number</label>
	<input class="pingPong" type="text" name="number" />
	<div class="button button_submit">Submit</div>
	<div><p class="validation"></p></div>
	</div>
	<div>
	<p class="results"></p>
	</div>
	</div>
	</body>