jpetto · December 29, 2015 09:59
diff --git a/cw-ajax.html b/cw-ajax.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>NES!</title>

 	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 	<style type="text/css">
 		/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
 		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

 		*, *:before, *:after {
 			-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 		}

 		body {
 			font-size: 62.5%;
 			font-family: 'Open Sans', sans-serif;
 		}

 		html {
 			font-size: 1.4em;
 		}

 		html, body {
 			background: #999;
 		}

 		.wrapper {
 			width: 100%;
 			margin: 0 auto;
 			padding: 20px;
 			background: #fff;
 		}

 		.h1 {
 			font-size: 2.6rem;
 			text-align: center;
 			margin-bottom: 40px;
 		}

 		.h2 {
 			font-size: 2.0rem;
 			margin-bottom: 20px;
 		}

 		.h3 {
 			font-size: 1.6rem;
 			margin-bottom: 20px;
 		}

 		.game-list li {
 			float: left;
 			width: 120px;
 			margin: 0 20px 20px 0;
 			-webkit-perspective: 600;
 		}

 		.game-list a {
 			display: block;
 			background: #4ebeea;
 			color: #fff;
 			border-radius: 4px;
 			padding: 6px 10px;
 			text-decoration: none;
 			box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.4);
 			transition: all 0.2s ease-in-out;
 		}

 		.game-list a:hover, .game-list a.selected {
 			background: #215468;
 			box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.6);
 			opacity: 1;
 			-webkit-transform: translateZ(70px);
 		}

 		.game-art {
 			width: 100%;
 		}

 		.game-art img {
 			max-width: 100%;
 		}

 		.game-description {
 			line-height: 1.3;
 		}

 		.group:after {
 			content: '';
 			display: table;
 			clear: both;
 		}

 		@media (min-width: 768px) {
 			.wrapper {
 				width: 768px;
 			}
 		}

 		@media (min-width: 1024px) {
 			.wrapper {
 				width: 1000px;
 				padding: 20px;
 			}
 		}
 	</style>
 </head>
 <body>

 <div class="wrapper group">
 	<section>
 		<h1 class="h1">NES Games!</h1>
 		<div>
 			<aside class="game-select">
 				<h1 class="h3">Game Select</h1>
 				<ul class="game-list" id="all-games"></ul>
 			</aside>
 		</div>
 		<div>
 			<article class="game game-main">
 				<h1 class="h2" id="game-name"></h1>
 				<div class="game-art" id="game-art"></div>
 				<div class="game-description" id="game-description"></div>
 			</article>
 		</div>
 	</section>
 </div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 	// the base URL for our JSON service
 	var api_url = 'http://iam.colum.edu/jon.petto/nesgames.php?callback=';

 	// initiate AJAX request on page load to get a list of games
 	$.ajax({
 		url: api_url + 'show_games&function=games',
 		dataType: 'script',
 	});

 	var show_games = function(data) {
 		// inspect the data returned from the server
 		console.log(data);

 		// variables to hold HTML elements
 		var $li, $a;

 		// reference to list element to hold our new HTML elements
 		var $list = $('#all-games');

 		// loop over all games in the data object and create
 		// HTML objects
 		for (var i = 0; i < data.games.length; i++) {
 			// create a new <li>

 			// create a new <a> and give it necessary attributes
 				// 'class': 'game-link'
 				// 'href': ''
 				// 'data-game-id': the id of the current game in the loop

 			// set the text of the <a> to the name of the current game in the loop

 			// append the <a> to the <li>

 			// append the <li> to the list
 		}

 		// add click handlers to all the new <a> elements we just
 		// created.
 		$list.find('a').on('click', function(e) {
 			// prevent the default click action
 			e.preventDefault();

 			// perform an AJAX request to get more information about
 			// the game clicked on

 			// remove the 'selected' class from all <a> elements in the list

 			// add the 'selected' class to the <a> element clicked on
 		});
 	};

 	// callback function used to display game name, art, & description
 	var show_game = function(data) {
 		console.log(data);

 		// set the text of #game-name to the name of the game

 		// set the html of #game-art to a new <img> element with the
 		// game's box_art property as the src

 		// set the text of #game-description to the description of the game
 	};
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>NES!</title>

	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<style type="text/css">
	/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

	, :before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}

	body {
	font-size: 62.5%;
	font-family: 'Open Sans', sans-serif;
	}

	html {
	font-size: 1.4em;
	}

	html, body {
	background: #999;
	}

	.wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	}

	.h1 {
	font-size: 2.6rem;
	text-align: center;
	margin-bottom: 40px;
	}

	.h2 {
	font-size: 2.0rem;
	margin-bottom: 20px;
	}

	.h3 {
	font-size: 1.6rem;
	margin-bottom: 20px;
	}

	.game-list li {
	float: left;
	width: 120px;
	margin: 0 20px 20px 0;
	-webkit-perspective: 600;
	}

	.game-list a {
	display: block;
	background: #4ebeea;
	color: #fff;
	border-radius: 4px;
	padding: 6px 10px;
	text-decoration: none;
	box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.4);
	transition: all 0.2s ease-in-out;
	}

	.game-list a:hover, .game-list a.selected {
	background: #215468;
	box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.6);
	opacity: 1;
	-webkit-transform: translateZ(70px);
	}

	.game-art {
	width: 100%;
	}

	.game-art img {
	max-width: 100%;
	}

	.game-description {
	line-height: 1.3;
	}

	.group:after {
	content: '';
	display: table;
	clear: both;
	}

	@media (min-width: 768px) {
	.wrapper {
	width: 768px;
	}
	}

	@media (min-width: 1024px) {
	.wrapper {
	width: 1000px;
	padding: 20px;
	}
	}
	</style>
	</head>
	<body>

	<div class="wrapper group">
	<section>
	<h1 class="h1">NES Games!</h1>
	<div>
	<aside class="game-select">
	<h1 class="h3">Game Select</h1>
	<ul class="game-list" id="all-games"></ul>
	</aside>
	</div>
	<div>
	<article class="game game-main">
	<h1 class="h2" id="game-name"></h1>
	<div class="game-art" id="game-art"></div>
	<div class="game-description" id="game-description"></div>
	</article>
	</div>
	</section>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	// the base URL for our JSON service
	var api_url = 'http://iam.colum.edu/jon.petto/nesgames.php?callback=';

	// initiate AJAX request on page load to get a list of games
	$.ajax({
	url: api_url + 'show_games&function=games',
	dataType: 'script',
	});

	var show_games = function(data) {
	// inspect the data returned from the server
	console.log(data);

	// variables to hold HTML elements
	var $li, $a;

	// reference to list element to hold our new HTML elements
	var $list = $('#all-games');

	// loop over all games in the data object and create
	// HTML objects
	for (var i = 0; i < data.games.length; i++) {
	// create a new <li>

	// create a new <a> and give it necessary attributes
	// 'class': 'game-link'
	// 'href': ''
	// 'data-game-id': the id of the current game in the loop

	// set the text of the <a> to the name of the current game in the loop

	// append the <a> to the <li>

	// append the <li> to the list
	}

	// add click handlers to all the new <a> elements we just
	// created.
	$list.find('a').on('click', function(e) {
	// prevent the default click action
	e.preventDefault();

	// perform an AJAX request to get more information about
	// the game clicked on

	// remove the 'selected' class from all <a> elements in the list

	// add the 'selected' class to the <a> element clicked on
	});
	};

	// callback function used to display game name, art, & description
	var show_game = function(data) {
	console.log(data);

	// set the text of #game-name to the name of the game

	// set the html of #game-art to a new <img> element with the
	// game's box_art property as the src

	// set the text of #game-description to the description of the game
	};
	</script>
	</body>
	</html>