ruturajv/todo.html

## todo.html
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css" media="screen">
		html, input {
			font-family: sans-serif;
		}
		#todoList > li {
			cursor: pointer;
		}
		ul {
			padding: 15px;
			list-style-position: inside;
		}
		table {
			border-collapse: collapse;
		}
		td {
			border: 1px solid gray;
			vertical-align: top;
		}
		th {
			width: 200px;
		}
		</style>
		<title>TODO App</title>
	</head>
	<body>
		<input type="text" placeholder="Add todo" id="todo"> <input type="button" value="Add" onclick="addTodo()">
		<br>
		<table>
			<thead>
				<tr>
					<th>TODO</th>
					<th>Done</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><ul id="todoList" class="listarea"></ul></td>
					<td><ul id="doneList" class="listarea"></ul></td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
		function addTodo() {
			var todo = document.getElementById('todo');
			if(todo) {
				var todoLI = document.createElement("li");
				todoLI.innerHTML = todo.value;
				todoLI.title = "Click to finish todo";

				document.getElementById('todoList').appendChild(todoLI);
			}
		}

		document.getElementById('todoList').addEventListener("click", function(e){
			if(e.target.nodeName === 'LI') {
				var doneTodo = e.target;
				doneTodo.title = "";
				// add to doneList
				document.getElementById("doneList").appendChild(doneTodo);
			}
		});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css" media="screen">
	html, input {
	font-family: sans-serif;
	}
	#todoList > li {
	cursor: pointer;
	}
	ul {
	padding: 15px;
	list-style-position: inside;
	}
	table {
	border-collapse: collapse;
	}
	td {
	border: 1px solid gray;
	vertical-align: top;
	}
	th {
	width: 200px;
	}
	</style>
	<title>TODO App</title>
	</head>
	<body>
	<input type="text" placeholder="Add todo" id="todo"> <input type="button" value="Add" onclick="addTodo()">
	<br>
	<table>
	<thead>
	<tr>
	<th>TODO</th>
	<th>Done</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><ul id="todoList" class="listarea"></ul></td>
	<td><ul id="doneList" class="listarea"></ul></td>
	</tr>
	</tbody>
	</table>
	<script type="text/javascript">
	function addTodo() {
	var todo = document.getElementById('todo');
	if(todo) {
	var todoLI = document.createElement("li");
	todoLI.innerHTML = todo.value;
	todoLI.title = "Click to finish todo";

	document.getElementById('todoList').appendChild(todoLI);
	}
	}

	document.getElementById('todoList').addEventListener("click", function(e){
	if(e.target.nodeName === 'LI') {
	var doneTodo = e.target;
	doneTodo.title = "";
	// add to doneList
	document.getElementById("doneList").appendChild(doneTodo);
	}
	});
	</script>
	</body>
	</html>