reecefowell/ToDoApp.html

## ToDoApp.html
<!DOCTYPE html>
<html lang="en">
  <head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">

		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="tex/css" />

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

		<style type="text/css">
			html,body {
				background-color:#eee;
			}

			a, a:link, a:visited {
				color:#0088dd;
			}
			a:hover {
				background:#eee;
			}
			i[class^="icon-"], i[class*=" icon-"] {
				display:inline-block;
				background-image: url("https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png");
				background-repeat: no-repeat;
				background-position:0px 0px;
				width:20px;
				height:20px;
				line-height:14px;
				vertical-align:text-top;
			}
			i.icon-tick-on {
				background-position:0px 5px;
			}
			i.icon-tick-off {
				background-position:0px -13px;
			}

			div.list > header,
			div.list > ul.content,
			div.list > ul.content > li {
				margin:0px;
				padding:0px;
			}

			div.list {
				border:1px solid #ccc;
				margin:25px;
				padding:0px;
			}

			div.list > header {
				border:none;
				margin:0px !important;
				padding-left:12px;
			}

			div.list > header > h3 {
				margin:0px;
				padding:10px;
			}
			div.list > ul.content {
				list-style-type:none;
			}
			div.list > ul.content > li {
				border-top:1px solid #eee;
				background-color:#fff;
				width:100%;
				height:40px;
				padding:0px !important;
			}
			div.list > ul.content > li > a {
				display:block;
				width:100%;
				height:40px;
				line-height:40px;
				margin:0px;
				padding-left:20px;
			}
		</style>
	</head>
	<body>

		<div class="list clearfix" id="list-christmas">
			<header class="ui-widget-header"><h3>Christmas List</h3></header>
			<ul class="content">

			</ul>
		</div>


		<div class="list clearfix" id="list-todo">
			<header class="ui-widget-header"><h3>To-do List</h3></header>
			<ul class="content">

			</ul>
		</div>

		<div id="dialog-info" title="...">
		  <p id="dialog-message">

		  </p>
		</div>

		<script type="text/javascript">
			$(document).ready(function() {
				console.log('Ready...');

				var taskData = [
				    {
				        name: 'Buy Groceries',
				        description: 'Go to the store and get some milk and peanut butter for the children.',
				        completed: true
				    },
				    {
				        name: 'Pick up the Kids',
				        description: 'Drop by the middle school and pick up the children.',
				        completed: true
				    },
				    {
				        name: 'Change the Car Oil',
				        description: 'The SUV needs an oil change. Rotate the tires as well.',
				        completed: false
				    },
				    {
				        name: 'Attend a Company Gathering',
				        description: 'The company is meeting up at 8:00 PM to discuss the new contract.',
				        completed: false
				    },
				    {
				        name: 'Meet up for Dinner',
				        description: 'Meet up with the wife around 9:00 PM for some late dinner. Bring a flower.',
				        completed: false
				    }
				];

				var holidayData = [
				    {
				        name: 'John Klide',
				        completed: true
				    },
				    {
				        name: 'Joe Simpson',
				        completed: false
				    },
				    {
				        name: 'Anna Montanna',
				        completed: true
				    },
				    {
				        name: 'Teddy Barry',
				        completed: true
				    },
				    {
				        name: 'Allan Johnson',
				        completed: false
				    }
				];

				function List(containerId) {
					this.list = [];
					this.containerId = '';
					this.container = null;

					this.init(containerId);

					return this;
				}

				List.prototype.init = function (containerId) {
					this.containerId = containerId;
					this.container = $('div#' + containerId + ' > ul');

					return this;
				}

				List.prototype.addArrayToList = function (list) {
					var length = list.length;

					for (var i = 0; i < length; i++) {
						this.addItem(list[i]);
					}
				}

				List.prototype.addItem = function (item) {
					index = this.list.length;

					this.list[index] = item;

					var id = this.containerId + '-' + index;
                	var tick = ((item['completed'] == true) ? "on" : "off");

					this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');

					el = $('#' + id + ' > a');

					this.bind(el);
				}

				List.prototype.bind = function (el) {
					el.bind('click', this.click);
				}

				List.prototype.click = function(event) {
					event.preventDefault();

					console.log('Clicked: ' + $(this).text() + ' - ' + $(this).data('checked'));

					if ($(this).data('checked').toLowerCase() == "off") {
						$(this).data('checked', "on");

						$(this).children().filter('i').attr('class', 'icon-tick-on');
					} else {
						$(this).data('checked', "off");

						$(this).children().filter('i').attr('class', 'icon-tick-off');
					}
				}

				function ListExtended(containerId) {
					this.list = [];
					this.containerId = '';
					this.container = null;

					this.init(containerId);

					return this;
				}

				ListExtended.prototype = new List();

				ListExtended.prototype.addItem = function (item) {
					index = this.list.length;

					this.list[index] = item;

					var id = this.containerId + '-' + index;
                	var tick = ((item['completed'] == true) ? "on" : "off");

					this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '" data-description="' + item['description'] + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');

					el = $('#' + id + ' > a');

					this.bind(el);
				}

				ListExtended.prototype.click = function(event) {
					event.preventDefault();

					console.log('Clicked2: ' + $(this).text() + ' - ' + $(this).data('checked'));

					if ($(this).data('checked').toLowerCase() == "off") {
						$(this).data('checked', "on");

						$(this).children().filter('i').attr('class', 'icon-tick-on');
					} else {
						$(this).data('checked', "off");

						$(this).children().filter('i').attr('class', 'icon-tick-off');
					}

				    popup = $("#dialog-info");

					popup.text($(this).data('description'));
					popup.attr('title', $(this).text());

					$(popup).dialog({
				      modal: true,
				      buttons: {
				        Close: function() {
				          $(this).dialog("close");
				        }
				      }
				    });
				}

				var holiday = new List('list-christmas');
				holiday.addArrayToList(holidayData);

				var todo = new ListExtended('list-todo');
				todo.addArrayToList(taskData);

			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">

	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="tex/css" />

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

	<style type="text/css">
	html,body {
	background-color:#eee;
	}

	a, a:link, a:visited {
	color:#0088dd;
	}
	a:hover {
	background:#eee;
	}
	i[class^="icon-"], i[class*=" icon-"] {
	display:inline-block;
	background-image: url("https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png");
	background-repeat: no-repeat;
	background-position:0px 0px;
	width:20px;
	height:20px;
	line-height:14px;
	vertical-align:text-top;
	}
	i.icon-tick-on {
	background-position:0px 5px;
	}
	i.icon-tick-off {
	background-position:0px -13px;
	}

	div.list > header,
	div.list > ul.content,
	div.list > ul.content > li {
	margin:0px;
	padding:0px;
	}

	div.list {
	border:1px solid #ccc;
	margin:25px;
	padding:0px;
	}

	div.list > header {
	border:none;
	margin:0px !important;
	padding-left:12px;
	}

	div.list > header > h3 {
	margin:0px;
	padding:10px;
	}
	div.list > ul.content {
	list-style-type:none;
	}
	div.list > ul.content > li {
	border-top:1px solid #eee;
	background-color:#fff;
	width:100%;
	height:40px;
	padding:0px !important;
	}
	div.list > ul.content > li > a {
	display:block;
	width:100%;
	height:40px;
	line-height:40px;
	margin:0px;
	padding-left:20px;
	}
	</style>
	</head>
	<body>

	<div class="list clearfix" id="list-christmas">
	<header class="ui-widget-header"><h3>Christmas List</h3></header>
	<ul class="content">

	</ul>
	</div>


	<div class="list clearfix" id="list-todo">
	<header class="ui-widget-header"><h3>To-do List</h3></header>
	<ul class="content">

	</ul>
	</div>

	<div id="dialog-info" title="...">
	<p id="dialog-message">

	</p>
	</div>

	<script type="text/javascript">
	$(document).ready(function() {
	console.log('Ready...');

	var taskData = [
	{
	name: 'Buy Groceries',
	description: 'Go to the store and get some milk and peanut butter for the children.',
	completed: true
	},
	{
	name: 'Pick up the Kids',
	description: 'Drop by the middle school and pick up the children.',
	completed: true
	},
	{
	name: 'Change the Car Oil',
	description: 'The SUV needs an oil change. Rotate the tires as well.',
	completed: false
	},
	{
	name: 'Attend a Company Gathering',
	description: 'The company is meeting up at 8:00 PM to discuss the new contract.',
	completed: false
	},
	{
	name: 'Meet up for Dinner',
	description: 'Meet up with the wife around 9:00 PM for some late dinner. Bring a flower.',
	completed: false
	}
	];

	var holidayData = [
	{
	name: 'John Klide',
	completed: true
	},
	{
	name: 'Joe Simpson',
	completed: false
	},
	{
	name: 'Anna Montanna',
	completed: true
	},
	{
	name: 'Teddy Barry',
	completed: true
	},
	{
	name: 'Allan Johnson',
	completed: false
	}
	];

	function List(containerId) {
	this.list = [];
	this.containerId = '';
	this.container = null;

	this.init(containerId);

	return this;
	}

	List.prototype.init = function (containerId) {
	this.containerId = containerId;
	this.container = $('div#' + containerId + ' > ul');

	return this;
	}

	List.prototype.addArrayToList = function (list) {
	var length = list.length;

	for (var i = 0; i < length; i++) {
	this.addItem(list[i]);
	}
	}

	List.prototype.addItem = function (item) {
	index = this.list.length;

	this.list[index] = item;

	var id = this.containerId + '-' + index;
	var tick = ((item['completed'] == true) ? "on" : "off");

	this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');

	el = $('#' + id + ' > a');

	this.bind(el);
	}

	List.prototype.bind = function (el) {
	el.bind('click', this.click);
	}

	List.prototype.click = function(event) {
	event.preventDefault();

	console.log('Clicked: ' + $(this).text() + ' - ' + $(this).data('checked'));

	if ($(this).data('checked').toLowerCase() == "off") {
	$(this).data('checked', "on");

	$(this).children().filter('i').attr('class', 'icon-tick-on');
	} else {
	$(this).data('checked', "off");

	$(this).children().filter('i').attr('class', 'icon-tick-off');
	}
	}

	function ListExtended(containerId) {
	this.list = [];
	this.containerId = '';
	this.container = null;

	this.init(containerId);

	return this;
	}

	ListExtended.prototype = new List();

	ListExtended.prototype.addItem = function (item) {
	index = this.list.length;

	this.list[index] = item;

	var id = this.containerId + '-' + index;
	var tick = ((item['completed'] == true) ? "on" : "off");

	this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '" data-description="' + item['description'] + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');

	el = $('#' + id + ' > a');

	this.bind(el);
	}

	ListExtended.prototype.click = function(event) {
	event.preventDefault();

	console.log('Clicked2: ' + $(this).text() + ' - ' + $(this).data('checked'));

	if ($(this).data('checked').toLowerCase() == "off") {
	$(this).data('checked', "on");

	$(this).children().filter('i').attr('class', 'icon-tick-on');
	} else {
	$(this).data('checked', "off");

	$(this).children().filter('i').attr('class', 'icon-tick-off');
	}

	popup = $("#dialog-info");

	popup.text($(this).data('description'));
	popup.attr('title', $(this).text());

	$(popup).dialog({
	modal: true,
	buttons: {
	Close: function() {
	$(this).dialog("close");
	}
	}
	});
	}

	var holiday = new List('list-christmas');
	holiday.addArrayToList(holidayData);

	var todo = new ListExtended('list-todo');
	todo.addArrayToList(taskData);

	});
	</script>
	</body>
	</html>