Code to date

cfree · Jan 24, 2014 · ff5e0a4 · ff5e0a4
1 parent 173459d
commit ff5e0a4
Show file tree

Hide file tree

Showing 8 changed files with 430 additions and 1 deletion.
diff --git a/common/img/boba.png b/common/img/boba.png
diff --git a/index.html b/index.html
@@ -32,7 +32,7 @@ <h4>by <a href="http://www.danwellman.co.uk/">Dan Wellman</a></h4>
 		<li><a href="proj1/">Project One: Sliding Puzzle</a></li>
 		<li><a href="proj2/">Project Two: Fixed Sidebar</a></li>
 		<li><a href="proj3/">Project Three: Google Map</a></li>
-		<li><a href="proj4/">Project Four: Bounty Hunter</a></li>
+		<!-- <li><a href="proj4/">Project Four: Bounty Hunter</a></li> -->
 	</ul>
 
 	<hr>

diff --git a/proj4/about.html b/proj4/about.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html> 
+	<head> 
+		<title>Bounty Hunter</title> 
+		<meta name="viewport" content="width=device-width, initial-scale=1"> 
+
+		<link rel="stylesheet" href="../common/css/common.css" />
+		<link rel="stylesheet" href="assets/css/style.css" />
+		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+
+		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
+		<script src="http://borismoore.github.com/jsrender/jsrender.js">
+</script>
+	</head> 
+	<body> 
+		<div data-role="page">
+			<div data-role="header">
+				<a href="index.html" data-icon="home" data-shadow="false" data-iconpos="notext" data-transition="slide" data-direction="reverse" title="Home"></a>
+				<h1>About Bounty Hunter</h1>
+			</div>
+			<div data-role="content">
+				<p>
+					Bounty Hunter is an educational app built for the jQuery Hotshots book by Dan Wellman
+				</p>
+				<a href="http://www.danwellman.co.uk">danwellman.co.uk</a>
+			</div>
+			<div data-role="footer" data-position="fixed" data-id="footer">
+				<small>&copy; 2014 Denver Code Club</small>
+				<a class="ui-disabled" href="#" data-icon="info" data-role="button">
+					About
+				</a>
+			</div>
+		</div><!-- /page -->
+
+		<script src="assets/js/script.js"></script>
+	</body>
+</html>
diff --git a/proj4/assets/css/style.css b/proj4/assets/css/style.css
@@ -0,0 +1,101 @@
+.filter-form .ui-btn {
+	margin:10px 0 0 0; 
+	float:right; 
+}
+
+.ui-footer small { 
+	display:block; 
+	margin:10px; 
+	float:left; 
+}
+
+.ui-footer .ui-btn { 
+	margin:2px 10px 0 0; 
+	float:right; 
+}
+
+.ui-bar { 
+	margin:0 -15px 14px -15px; 
+	text-align:center; 
+}
+
+.ui-bar a:first-child { 
+	margin-left:-5px; 
+	float:left; 
+}
+
+.ui-bar a:last-child { 
+	margin-right:-5px; 
+	float:right; 
+}
+
+.ui-bar h2 { 
+	margin-top:10px; 
+	font-size:14px; 
+}
+
+.footer-bar { 
+	margin-top:14px; 
+}
+
+.bounty {
+	width:24%; 
+	border-radius:3px; 
+	margin-right:5%; 
+	float:left;
+	text-align:center; 
+	font-size:90%; 
+	line-height:1.5em;
+	font-weight:bold; 
+	color:#fff; 
+	background-color:#07d;
+	text-shadow:none;
+}
+
+.bounty span { 
+	display:block; 
+}
+
+.expires {
+	font-size:70%; 
+	font-weight:normal; 
+	line-height:1em;
+}
+
+.expires .value {
+	display:block; 
+	font-size:110%; 
+	font-weight:bold;
+	line-height:1.5em;
+}
+
+.title {
+	width:70%; 
+	margin-top:-.25em; 
+	float:left;
+	white-space:normal; 
+	font-size:80%; 
+	line-height:1.25em;
+	color:#07d;
+}
+
+.meta { 
+	clear:both; 
+}
+
+.meta span {
+	width:24%; 
+	margin-right:5%; 
+	float:left; 
+	font-size:70%;
+	font-weight:normal; 
+	color:#999;
+}
+
+.meta .value {
+	width:70%; 
+	margin-right:0; 
+	float:none; 
+	font-size:90%;
+	font-weight:bold;
+} 
diff --git a/proj4/assets/js/script.js b/proj4/assets/js/script.js
@@ -0,0 +1,134 @@
+(function($) {
+	var tags = '',
+		getBounties = function(page, callback) {
+			// AJAX request to Stack Exchange API
+			$.ajax({
+				url: 'http://api.stackexchange.com/2.0/questions/featured',
+				dataType: 'jsonp',
+				data: {
+					page: page,
+					pagesize: 10,
+					tagged: tags,
+					order: 'desc',
+					sort: 'activity',
+					site: 'stackoverflow',
+					filter: '!)4k2jB7EKv1OvDDyMLKT2zyrACssKmSCXeX5DeyrzmOdRu8sC5L8d7X3ZpseW5o_nLvVAFfUSf'
+				},
+				beforeSend: function() {
+					// Before the data is retrieved...
+					// Show the spinner text
+					$.mobile.loadingMessageTextVisible = true;
+					// Show the spinner
+					$.mobile.showPageLoadingMsg('a', 'Searching');
+				}
+			}).done(function(data) {
+				// When finished getting data, send it to the callback handler
+				callback(data);
+			});
+		};
+
+	$(document)
+		// Use onpageinit instead of $(document).ready() because the AJAX calls used 
+		// throughout jQuery Mobile may not be completed by the time the 
+		// document is ready. onpageinit fires only once, when the page is 
+		// first fully loaded.
+		.on('pageinit', '#welcome', function() {
+			// When search button is clicked...
+			$('#search').on('click', function() {
+				// Prevent the button from being clicked twice
+				$(this).closest('.ui-btn').addClass('ui-disabled');
+
+				// Pull in list of tags from the text input
+				tags = $('tags').val();
+
+				// Go get 'em!
+				getBounties(1, function(data) {
+					// This becomes the AJAX callback function
+
+					// Cache the starting page number
+					data.currentPage = 1;
+
+					// Data must be stringified because only arrays and 
+					// primitive types can be saved in localStorage.
+					// Must convert to a JSON string
+					localStorage.setItem('res', JSON.stringify(data));
+
+					// Change the view to the list page
+					$.mobile.changePage('list.html', {
+						transition: 'slide'
+					});
+				});
+			});
+		})
+		// Whenever the welcome page is shown...
+		.on('pageshow', '#welcome', function() {
+			// Re-enable the search button
+			$('#search').closest('.ui-btn').removeClass('ui-disabled');
+		})
+		// 
+		.on('pageinit', '#list', function() {
+			var data = JSON.parse(localStorage.getItem('res')),
+				total = parseInt(data.total, 10),
+				size = parseInt(data.page, 10),
+				totalPages = Math.ceil(total / size),
+				months = [
+					'Jan',
+					'Feb',
+					'Mar',
+					'Apr',
+					'May',
+					'Jun',
+					'Jul',
+					'Aug',
+					'Sep',
+					'Oct',
+					'Nov',
+					'Dev'
+				],
+				createData = function(date) {
+					var cDate = new Date(date * 1000),
+						fDate = [
+							cDate.getDate(),
+							months[cDate.getMonth()],
+							cDate.getFullyYear()
+						].join(' ');
+
+					return fDate;
+				};
+
+			$.views.helpers({
+				CreateDate: createDate
+			});
+
+			$('#results')
+				.append(
+					$('#listTemplate').render(data)
+				)
+				.find('ul')
+				.listview();
+
+			var setClasses = function() {
+				if (data.currentPage > 1) {
+					$('a[data-icon="back"]').removeClass('ui-disabled');
+				}
+				else {
+					$('a[data-icon="back"]').addClass('ui-disabled');
+				}
+
+				if (data.currentPage < totalPages) {
+					$('a[data-icon="forward"]').removeClass('ui-disabled');
+				}
+				else {
+					$('a[data-icon="forward"]').addClass('ui-disabled');
+				}
+			};
+
+			$('span.num').text(data.currentPage);
+			$('span.of').text(totalPages);
+
+			if (totalPages > 1) {
+				$('a[data-icon="forward"]').removeClass('ui-disabled');
+			}
+
+		});
+})(jQuery);
diff --git a/proj4/index.html b/proj4/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html> 
+	<head> 
+		<title>Bounty Hunter</title> 
+		<meta name="viewport" content="width=device-width, initial-scale=1"> 
+
+		<link rel="stylesheet" href="../common/css/common.css" />
+		<link rel="stylesheet" href="assets/css/style.css" />
+		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+
+		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
+		<script src="http://borismoore.github.com/jsrender/jsrender.js">
+</script>
+	</head> 
+	<body> 
+		<div id="welcome" data-role="page">
+			<div data-role="header">
+				<h1>Bounty Hunter</h1>
+			</div><!-- /header -->
+
+			<div data-role="content">
+				<p>
+					Enter tag(s) to search for bounties on.
+					Separate tags with a semi-colon, or leave blank to get all bounties.
+				</p>	
+				<div class="filter-form">
+					<label for="tags" class="ui-hidden-accessible">
+						Search by tag(s):
+					</label>
+					<input id="tags" type="text" placeholder="Tag(s)" />
+					<button data-inline="true" data-icon="search">
+						Search
+					</button>
+				</div>
+			</div><!-- /content -->
+			<img src="../common/img/boba.png" alt="Bounty Hunter" />
+			<div data-role="footer" data-position="fixed" data-id="footer">
+				<small>&copy; 2014 Denver Code Club</small>
+				<a href="about.html" data-icon="info" data-role="button" data-transition="slide">
+					About
+				</a>
+			</div>
+		</div><!-- /page -->
+
+		<script src="assets/js/script.js"></script>
+	</body>
+</html>