RadoRado/index.html

## index.html
<!DOCTYPE html>

<html>
<head>
	<title>Simple TODO List</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<div id="todoListContainer">
		<ul id="todoListBody">
			<li>
				<label>
					<input type="checkbox" /> Some task description
				</label>
			</li>
		</ul>
		<div id="todoListToolbar">
			<input type="text" placeholder="New task goes here" />
		</div>
	</div>
	<script type="text/javascript" src="jquery-2.0.0.js"></script>
	<script type="text/javascript" src="underscore.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

## main.css
#todoListContainer {
	width: 300px;
	height: 500px;
	border: 1px solid;
	position: relative;
	/*background-color: green;*/
	/*opacity: 0.5;*/
}

#todoListToolbar {
	position: absolute;
	bottom: 1px;
	width: 100%;
	margin-left: 5px;
	margin-bottom: 5px;
}

#todoListToolbar input[type="text"] {
	width: 80%;
	height: 30px;
}

#todoListBody {
	list-style: none;
	padding-left: 5px;
}

#todoListBody label {
	display: block;
}

#todoListBody label:hover {
	cursor: pointer;
}

.completedTask {
	text-decoration: line-through;
}

## main.js
// what is callback ?

// jQuery(document)


$(document).ready(function(event) {
	// {
	// 	todoId : -1,
	// 	description : "",
	// 	completed : false
	// }

	var todoData = [];

	var constructNewTodoItem = (function() {
		var i = 1;
		return function(text) {
					return {
						id : i++,
						description : text,
						completed : false
					}
	};
	}) ();

	var constructNewTodoHtml = function(todoObject) {
		var liClass = "";
		var checked = "";
		if(todoObject.completed) {
			liClass = "completedTask";
			checked = "checked";
		}

		var htmlTemplate =
					"<li class='<%= liClass %>'>" +
						"<label>" +
							"<input type='checkbox' <%= checked %> />" +
							"<span><%= todoId %></span>" +
						"<%- todoDescription %></label>" +
					"</li>";
		// using _.template()

		return _.template(htmlTemplate, {
			todoDescription : todoObject.description,
			todoId : todoObject.id,
			liClass : liClass,
			checked : checked
		});
	};

	var todoInput =
	$('#todoListToolbar input[type="text"]');

	var render = function() {
		$("#todoListBody").empty();
		_.each(todoData, function(item){
			var html = constructNewTodoHtml(item);
			$("#todoListBody").append(html);
		});
	};

	todoInput.keyup(function(event) {
		if(event.keyCode === 13) {
			if(!todoInput.val()) {
				return false;
			}
			var newTodoObject = constructNewTodoItem(todoInput.val());
			todoData.push(newTodoObject);
			todoInput.val("");
			render();
		}
	});

	$(document).on("click", "#todoListBody input[type='checkbox']", function() {
		var taskId = $(this).closest('li').find("span").html();
		console.log(taskId);

		// _.find
		todoData[taskId - 1].completed = !todoData[taskId - 1].completed;
		render();
	});

});
	<!DOCTYPE html>

	<html>
	<head>
	<title>Simple TODO List</title>
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
	<div id="todoListContainer">
	<ul id="todoListBody">
	<li>
	<label>
	<input type="checkbox" /> Some task description
	</label>
	</li>
	</ul>
	<div id="todoListToolbar">
	<input type="text" placeholder="New task goes here" />
	</div>
	</div>
	<script type="text/javascript" src="jquery-2.0.0.js"></script>
	<script type="text/javascript" src="underscore.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	#todoListContainer {
	width: 300px;
	height: 500px;
	border: 1px solid;
	position: relative;
	/background-color: green;/
	/opacity: 0.5;/
	}

	#todoListToolbar {
	position: absolute;
	bottom: 1px;
	width: 100%;
	margin-left: 5px;
	margin-bottom: 5px;
	}

	#todoListToolbar input[type="text"] {
	width: 80%;
	height: 30px;
	}

	#todoListBody {
	list-style: none;
	padding-left: 5px;
	}

	#todoListBody label {
	display: block;
	}

	#todoListBody label:hover {
	cursor: pointer;
	}

	.completedTask {
	text-decoration: line-through;
	}
	// what is callback ?

	// jQuery(document)


	$(document).ready(function(event) {
	// {
	// todoId : -1,
	// description : "",
	// completed : false
	// }

	var todoData = [];

	var constructNewTodoItem = (function() {
	var i = 1;
	return function(text) {
	return {
	id : i++,
	description : text,
	completed : false
	}
	};
	}) ();

	var constructNewTodoHtml = function(todoObject) {
	var liClass = "";
	var checked = "";
	if(todoObject.completed) {
	liClass = "completedTask";
	checked = "checked";
	}

	var htmlTemplate =
	"<li class='<%= liClass %>'>" +
	"<label>" +
	"<input type='checkbox' <%= checked %> />" +
	"<span><%= todoId %></span>" +
	"<%- todoDescription %></label>" +
	"</li>";
	// using _.template()

	return _.template(htmlTemplate, {
	todoDescription : todoObject.description,
	todoId : todoObject.id,
	liClass : liClass,
	checked : checked
	});
	};

	var todoInput =
	$('#todoListToolbar input[type="text"]');

	var render = function() {
	$("#todoListBody").empty();
	_.each(todoData, function(item){
	var html = constructNewTodoHtml(item);
	$("#todoListBody").append(html);
	});
	};

	todoInput.keyup(function(event) {
	if(event.keyCode === 13) {
	if(!todoInput.val()) {
	return false;
	}
	var newTodoObject = constructNewTodoItem(todoInput.val());
	todoData.push(newTodoObject);
	todoInput.val("");
	render();
	}
	});

	$(document).on("click", "#todoListBody input[type='checkbox']", function() {
	var taskId = $(this).closest('li').find("span").html();
	console.log(taskId);

	// _.find
	todoData[taskId - 1].completed = !todoData[taskId - 1].completed;
	render();
	});

	});