From 1790c23a0621864dcc24125631f2f9f1de388376 Mon Sep 17 00:00:00 2001
From: tzweiner <weiner@homefront.tv>
Date: Tue, 2 Dec 2014 11:11:54 -0500
Subject: [PATCH] updates for completed challange

---
 css/application.css | 176 +++++++++++++++++++++++++++
 css/ie7.css         |   3 +
 index.html          |  45 ++++---
 js/script.js        | 283 ++++++++++++++++++++++++++++++++++++++++++++
 results.html        |  36 ++++--
 5 files changed, 515 insertions(+), 28 deletions(-)
 create mode 100644 css/application.css
 create mode 100644 css/ie7.css
 create mode 100644 js/script.js

diff --git a/css/application.css b/css/application.css
new file mode 100644
index 0000000..ac8ac44
--- /dev/null
+++ b/css/application.css
@@ -0,0 +1,176 @@
+.container {
+	overflow: hidden;
+	font-family: 'Open Sans', sans-serif;
+}
+
+form {
+	position: relative;
+}
+
+form .feedback {
+	position: absolute;
+	right: 2%;
+	bottom: auto;
+	top: 2%;
+	width: 20%;
+	min-width: 140px;
+	left: auto;
+	padding: 10px;
+	background:  rgba(153, 153, 0, 1);
+}
+
+form,
+.results{
+	padding: 20px;
+	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+	margin-bottom: 50px;	
+	overflow: hidden;
+}
+
+.form-group {
+	overflow: hidden;
+}
+
+h1 { color: darkred }
+h1 { weight: bolder }
+h1 { margin: 20px; display: block; opacity: 80%; }
+h1:hover { opacity:1; }
+.hidden {
+	display: none;
+}
+
+.error-wrapper {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.85);
+    display: none;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    top: 0;   
+    z-index: 201;
+}
+
+.message {	
+	width: 40%;
+	height: 40%;
+	position: absolute;
+	background: #fff;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 2%;
+	font-size: 20px;
+}
+
+.message .close-x {
+	position: absolute;
+	bottom: 20px;
+	right: 20px;
+	left: auto;
+	top: auto;
+	padding: 5px 10px;
+	color: #fff;
+	width: auto;
+	
+	background: none repeat scroll 0 0 #0099cc;
+    border: 0 none;
+    border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+	font-family: 'Roboto Condensed', sans-serif;
+	
+	-webkit-transition: all .3s ease;
+	-moz-transition: all .3s ease;
+	-o-transition: all .3s ease;
+	-ms-transition: all .3s ease;
+	transition: all .3s ease;
+}
+
+.message .close-x:hover {
+	color: #fff;
+	background: #0070a3;
+	cursor: pointer;
+}
+
+label.checkbox {
+	padding: 5px 20px 5px 40px;
+	margin: 5px 0 5px 5px;
+	-webkit-transition: all .3s ease;
+	-moz-transition: all .3s ease;
+	-o-transition: all .3s ease;
+	-ms-transition: all .3s ease;
+	transition: all .3s ease;
+
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+	
+	float: left;
+	clear: left;
+}
+
+label:hover {
+	-webkit-box-shadow: 0px 0px 5px 0px rgba(153, 153, 0, 1);
+	-moz-box-shadow: 0px 0px 5px 0px rgba(153, 153, 0, 1);
+	box-shadow: 0px 0px 5px 0px rgba(153, 153, 0, 1);
+}
+
+.btn {
+	clear: left;
+	display: block;
+	background: none repeat scroll 0 0 #0099cc;
+    border: 0 none;
+    border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+	font-family: 'Roboto Condensed', sans-serif;
+    padding: 8px 13px;
+	
+	-webkit-transition: all .3s ease;
+	-moz-transition: all .3s ease;
+	-o-transition: all .3s ease;
+	-ms-transition: all .3s ease;
+	transition: all .3s ease;
+}
+
+.btn:hover,
+.btn:active,
+.btn:focus {
+	color: #fff;
+	background: #0070a3;
+}
+
+a.btn {
+	display; block;
+	float: left;
+}
+
+.btn-default {
+	float: left;	
+}
+
+.btn-reset {
+	float: right;
+	clear: none;
+}
+
+.in-IE {
+	display: none;
+}
+
+.results p ,
+.results ul {
+	margin: 1.5em 0;
+}
\ No newline at end of file
diff --git a/css/ie7.css b/css/ie7.css
new file mode 100644
index 0000000..9e2ab8d
--- /dev/null
+++ b/css/ie7.css
@@ -0,0 +1,3 @@
+.in-IE {
+	display: none;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 5fbd42f..74c1510 100644
--- a/index.html
+++ b/index.html
@@ -6,19 +6,16 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>TestMe_lite</title>
 	<link rel="stylesheet" href="css/bootstrap.css"/>
+	<link rel="stylesheet" href="css/application.css"/>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 	<script src="js/vendor/jquery.min.js"></script>
 	<script src="js/vendor/bootstrap.js"></script>
-	<style>
-		h1 { color: darkred }
-		h1 { weight: bolder }
-		h1 { margin: 20px; display: block; opacity: 80%; }
-		h1:hover { opacity:1; }
-	</style>
+	<script src="js/script.js"></script>
 </head>
 <body>
 <div class="container">
 	<div class="row">
-		<h1>The User Interface Developer Test</h1>
+		<h1>The User Interface Developer Test</h1>		
 	</div>
 	<div class="well">
 		<div class="well">
@@ -32,33 +29,49 @@ <h1>The User Interface Developer Test</h1>
 			</ul>
 		</div>
 	</div>
-	<form role="form">
+	<form role="form" action="results.html">
 		<div class="form-group">
-			<input type="checkbox">Select All
+			<input type="checkbox" id="select-all"> Select All
 		</div>
-		<div class="form-group">
+		<div class="form-group checkboxes">
 			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Abstract
+				<input type="checkbox" name="fields[]" value="Abstract">Abstract
 			</label>
 			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Publication
+				<input type="checkbox" name="fields[]" value="Publication">Publication
 			</label>
 			<label class="checkbox">
-				<input type="checkbox" value="Abstract">Inventor
+				<input type="checkbox" name="fields[]" value="Inventor">Inventor
 			</label>
 			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Language
+				<input type="checkbox" name="fields[]" value="Language">Language
 			</label>
 			<label class="checkbox">
-				<input type="checkbox" name="field" value="Abstract">Source
+				<input type="checkbox" name="fields[]" value="Source">Source
 			</label>
 			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Priority
+				<input type="checkbox" name="fields[]" value="Priority">Priority
 			</label>
 
+		</div>		
+		<div class="feedback">
+			<h4>So far you have selected:</h4>
+			<p class="feedback-none">Nothing</p>
+			<ul class="current-selections">
+			
+			</ul>
 		</div>
 		<button type="submit" class="btn btn-default">Submit</button>
+		<button type="reset" class="btn btn-reset">Clear</button>
 	</form>
+	
+	<div class="error-wrapper">
+		<div class="message">
+			<div class="close-x">OK</div>
+		</div>
+	</div>
+	
 	<script>console.log('page loaded');</script>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..4904fb9
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,283 @@
+$(document).ready ( function () {
+
+	// unselect all checkboxes
+	$('.form-group.checkboxes input').prop('checked', false);
+	
+	clearMessage();
+		
+	/************************
+	* Sorting
+	*************************/
+	
+	var $checkbox_container = $('.form-group.checkboxes');
+	var $labels = $('.form-group.checkboxes label');
+	
+	// crate a clone that will store the sorted elements
+	$('body').append ('<div class="hidden clone"></div>');
+	var $clone = $('.clone.hidden');
+	
+	// find all labels
+	var labels = new Array ();
+	$('.form-group.checkboxes label').each ( function () {
+		labels.push ($(this).html().split('>')[1].replace(/\s/g, ""));
+	});
+	
+	// clone the labels array so that we can sort it
+	var cloned_labels = cloneArray (labels);
+	
+	// sort labels
+	cloned_labels.sort();
+	
+	// loop over sorted labels and append the corresponding labels to the hidden element
+	for (var i in cloned_labels) {
+		var this_label = cloned_labels [i];
+		
+		var index = labels.indexOf(this_label); 
+		
+		$clone.append ($labels.eq(index).clone());
+	}
+	
+	$labels.fadeOut (300, function() {
+		$labels.remove();
+		$checkbox_container.append ($clone.children());
+		$clone.remove();
+	});
+	
+	
+	
+	/**********************
+	* Check/uncheck
+	***********************/
+	
+	
+	$('#select-all').on ( 'change', function (e) {
+		var $this = $(this);
+		
+		if ($this.prop('checked')) {
+			checkAll ();
+		}
+		
+		else {
+			uncheckAll ();
+		}
+		updateFeedback ();
+	});
+	
+	$('body').on ('change', '.form-group.checkboxes input', function (e) {
+		var $this = $(this);
+		
+		checkState();
+		updateFeedbackSingle ($this);
+	});
+	
+	// initiate state
+	checkState();
+	
+	/*****************************
+	* Submit
+	******************************/
+	
+	var $message = $('.message');
+	$('.btn-default').click ( function (e) {
+		
+		if (inputCheck ()) {
+		
+		}
+		else {
+			$message.append('Please choose more items!');
+			$('.error-wrapper').fadeIn (300);
+			e.preventDefault();
+		}
+		
+	});
+	
+	$('.btn-reset').click ( function (e) {
+		clearMessage ();
+		uncheckAll ();
+		checkState ();
+		updateFeedback ();
+	});
+	
+	$('.close-x').click ( function (e) {
+		
+		clearMessage ();
+		e.preventDefault();
+	});
+	
+	/****************************
+	* Results
+	*****************************/
+	
+	if ($('.results').length) {
+		var url = window.location;
+		var url_query = url.search.substring(1)
+
+		var parameters = url_query.split('&');
+		
+		var $wrapper = $('.selections-wrapper');
+		
+		if (url_query == '') {
+			$wrapper.append ('<p>Too bad. Nothing was selected.</p>');
+			return;
+		}
+		
+		// check if there's anything to display
+		if (parameters.length) {
+			$wrapper.append ('<ul></ul>');
+			
+			for (var i in parameters) {
+				var this_parameter_array = parameters[i].split ('=');
+				var this_parameter_name = decodeURIComponent (this_parameter_array [0]);
+				var this_parameter_value = this_parameter_array [1];
+			
+				$wrapper.find('ul').append ('<li>' + this_parameter_value + '</li>');
+			}
+		}
+		else {
+			$wrapper.append ('<p>Too bad. Nothing was selected.</p>');
+		}
+	}
+	
+});
+
+function cloneArray (this_array) {
+
+	var clone = new Array();
+	
+	for (var i in this_array) {
+		clone.push (this_array[i]);
+	}
+	return clone;
+}
+
+function clearMessage () {
+	$('.error-wrapper').fadeOut (300, function () {
+		$('.message').html('<div class="close-x">OK</div>');
+	});
+}
+
+function checkAll () {
+	$('.form-group.checkboxes label input').each ( function () {
+		$(this).prop ('checked', true);
+	});
+}
+
+function uncheckAll () {
+	$('.form-group.checkboxes label input').each ( function () {
+		$(this).prop ('checked', false);
+	});
+}
+
+function checkState () {
+	var num_checkboxes = $('.form-group.checkboxes label').length;
+
+	var num_checked = $('.form-group.checkboxes input:checked').length;
+	
+	if (num_checked == num_checkboxes) {
+		checkSelectAll ();
+	}
+	else if (num_checked == 0) {
+		uncheckSelectAll ();
+	}
+	else {
+		indeterminateSelectAll ();
+	}
+}
+
+function indeterminateSelectAll () {
+	// Make Select All "indeterminate"
+	$("#select-all").prop("indeterminate", true);
+}
+
+function checkSelectAll () {
+	$("#select-all").prop("indeterminate", false);
+	$("#select-all").prop("checked", true);
+}
+
+function uncheckSelectAll () {
+	$("#select-all").prop("indeterminate", false);
+	$("#select-all").prop("checked", false);
+}
+
+function inputCheck () {
+	var num_checked = $('.form-group.checkboxes input:checked').length;
+	
+	if (num_checked == 1) {
+		if ($('.form-group.checkboxes input:checked').val() == 'Language') return false;
+	}
+
+	return true;
+	
+}
+
+function updateFeedback () {
+	var $feedback = $('.feedback .current-selections');
+	
+	var num_checked = $('.form-group.checkboxes input:checked').length;
+	
+	if (num_checked == 0) {
+		$feedback.hide();
+		$feedback.html('');
+		$('.feedback-none').show();
+		
+	}
+	else {
+		$('.feedback-none').hide();
+		$feedback.show(); (300);
+		$('.form-group.checkboxes input:checked').each ( function () {
+			var label = $(this).parent('label').html().split('>')[1].replace(/\s/g, "");
+			checkAppendFeedback (label);				
+		});
+		
+		
+	}
+}
+
+function updateFeedbackSingle ($input) {
+	var $feedback = $('.feedback .current-selections');
+	var label = $input.parent('label').html().split('>')[1].replace(/\s/g, "");
+	var num_checked = $('.form-group.checkboxes input:checked').length;
+	
+	if (num_checked == 0) {
+		$feedback.fadeOut (300, function () {
+			$feedback.html('');
+			$('.feedback-none').fadeIn (300);
+		});
+		
+	}
+	else {
+		if ($input.is(':checked')) {
+			$('.feedback-none').hide();
+			checkAppendFeedback (label);
+			//$feedback.append ('<li>' + label + '</li>');
+			$feedback.show ();
+		}
+		else {
+			removeFromFeedback (label);
+		}
+		
+
+	}
+}
+
+
+function removeFromFeedback (label) {
+	var $feedback = $('.feedback .current-selections');
+	
+	$feedback.find ('li').each ( function () {
+		if ($(this).text() == label) $(this).remove();
+	});
+}
+
+function checkAppendFeedback (label) {
+	var $feedback = $('.feedback .current-selections');
+	var flag = false;
+	
+	$feedback.find ('li').each ( function () {
+		if ($(this).text() == label) flag = true;
+	});
+	
+	if (!flag) {
+		$feedback.append ('<li>' + label + '</li>');
+	}	
+}
\ No newline at end of file
diff --git a/results.html b/results.html
index dfe49cf..297d03e 100644
--- a/results.html
+++ b/results.html
@@ -4,6 +4,9 @@
 	<meta charset="utf-8">
 	<title>TestMe_lite results!</title>
 	<link rel="stylesheet" href="css/bootstrap.css"/>
+	<link rel="stylesheet" href="css/application.css"/>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+	
 	<!--[if IE 7]>
 	<script>
 		// Attach additional stylesheets and JS for ie.
@@ -12,26 +15,35 @@
 
 		var json3 = document.createElement('script');
 		json3.type = 'text/javascript';
-		json3.href = '/vendor/json3.js';
-		json3.appendChild(document.getElementsByTagName('head')[0]);
+		json3.src = 'js/vendor/json3.js';		
+		(document.getElementsByTagName('head')[0] || document.documentElement).appendChild(json3);
 	</script>
 	<![endif]-->
 	<script src="js/vendor/jquery.min.js"></script>
 	<script src="js/vendor/bootstrap.js"></script>
+	<script src="js/script.js"></script>
 
 </head>
 <body>
-<div class="container">
-	<div class="row">
-		<h1>You made it to the results page!</h1>
-	</div>
-	<div class="well">
-		<p>On this page you will:</p>
-		<ul>
-			<li>Tastefully display the selections the user made .</li>
-			<li>Fix the json3 and css includes for IE7.</li>
-		</ul>
+	<div class="container">
+		<div class="row">
+			<h1>You made it to the results page!</h1>
+			<h2 class="in-IE">We are in IE7 by the way!</h2>
+		</div>
+		<div class="well">
+			<p>On this page you will:</p>
+			<ul>
+				<li>Tastefully display the selections the user made .</li>
+				<li>Fix the json3 and css includes for IE7.</li>
+			</ul>
 
+		</div>
+		
+		<div class="results">
+			<h3>You have made the following selections:</h3>
+			<div class="selections-wrapper"></div>
+			<a class="btn" href="index.html">Back to Home</a>
+		</div>
 	</div>
 </body>
 </html>
\ No newline at end of file