ruturajv · August 29, 2015 14:03
diff --git a/todo-ajax.html b/todo-ajax.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 AJAXListener(){
 			console.log(JSON.parse(this.response));
 		}
 		function addTodo() {
 			var todo = document.getElementById('todo');
 			if(todo) {
 				// Do an AJAX Call
 				var oReq = new XMLHttpRequest();
 				oReq.onload = AJAXListener;
 				oReq.open("get", "todo-ajax.php", true);
 				oReq.send();

 				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 AJAXListener(){
	console.log(JSON.parse(this.response));
	}
	function addTodo() {
	var todo = document.getElementById('todo');
	if(todo) {
	// Do an AJAX Call
	var oReq = new XMLHttpRequest();
	oReq.onload = AJAXListener;
	oReq.open("get", "todo-ajax.php", true);
	oReq.send();

	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>