mbildner · February 23, 2015 14:03
diff --git a/todo-vanillajs.html b/todo-vanillajs.html
 <html>
 <head>
 	<title>todo app</title>
 </head>
 <body>

 	<h2>Todo Items</h2>
 	<ul id="todo-list"></ul>

 	<input id="add-item-input">
 	<button id="add-item-button">Add Item</button>

 	<h2>Finished Items</h2>
 	<ul id="finished-list"></ul>

 	<script>

 		var todoList = document.getElementById('todo-list');
 		var finishedList = document.getElementById('finished-list');
 		var button = document.getElementById('add-item-button');
 		var input = document.getElementById('add-item-input');

 		var todoItems = [];
 		var finishedItems = [];

 		button.addEventListener('click', function (event) {
 			// get the new item
 			var todoLabel = input.value;
 			// clear the input element
 			input.value = '';

 			// add it to our array of items
 			todoItems.push(todoLabel);

 			// make the new todo list item
 			var todoListItem = document.createElement('li');

 			// label it!
 			var todoListItemLabel = document.createElement('p');
 			todoListItemLabel.textContent = todoLabel;

 			// handle finishing the task
 			var finishItemButton = document.createElement('button');
 			finishItemButton.textContent = 'finished';
 			finishItemButton.addEventListener('click', function (finishedClickEvent) {
 				var finishedItem = finishedClickEvent.currentTarget.parentElement;
 				for (var i=0; i<todoList.children.length; i++) {
 					// remove the actual element
 					if (todoList.children[i] === finishedItem) {
 						todoList.removeChild(finishedItem);
 						var finishedItemText = todoItems.splice(i, 1);
 						finishedItems.push(finishedItemText);
 						var newFinishedItemElement = document.createElement('li');
 						var newFinishedItemLabel = document.createElement('p');
 						newFinishedItemLabel.textContent = finishedItemText;

 						newFinishedItemElement.appendChild(newFinishedItemLabel);
 						finishedList.appendChild(newFinishedItemElement);
 					}
 				}
 			});

 			// handle removing the task
 			var removeTodoItemButton = document.createElement('button');
 			removeTodoItemButton.textContent = 'remove';
 			removeTodoItemButton.addEventListener('click', function (removeClickEvent) {
 				// get a reference to the button
 				var itemToRemove = removeClickEvent.currentTarget.parentElement;
 				for (var i=0; i<todoList.children.length; i++) {
 					// remove the actual element
 					if (todoList.children[i] === itemToRemove) {
 						todoList.removeChild(itemToRemove);
 						var removedItemText = todoItems.splice(i, 1);
 					}
 				}
 			});

 			// attach our new html
 			todoListItem.appendChild(todoListItemLabel);
 			todoListItem.appendChild(removeTodoItemButton);
 			todoListItem.appendChild(finishItemButton);
 			todoList.appendChild(todoListItem);
 		});


 	</script>


 </body>
 </html>
	<html>
	<head>
	<title>todo app</title>
	</head>
	<body>

	<h2>Todo Items</h2>
	<ul id="todo-list"></ul>

	<input id="add-item-input">
	<button id="add-item-button">Add Item</button>

	<h2>Finished Items</h2>
	<ul id="finished-list"></ul>

	<script>

	var todoList = document.getElementById('todo-list');
	var finishedList = document.getElementById('finished-list');
	var button = document.getElementById('add-item-button');
	var input = document.getElementById('add-item-input');

	var todoItems = [];
	var finishedItems = [];

	button.addEventListener('click', function (event) {
	// get the new item
	var todoLabel = input.value;
	// clear the input element
	input.value = '';

	// add it to our array of items
	todoItems.push(todoLabel);

	// make the new todo list item
	var todoListItem = document.createElement('li');

	// label it!
	var todoListItemLabel = document.createElement('p');
	todoListItemLabel.textContent = todoLabel;

	// handle finishing the task
	var finishItemButton = document.createElement('button');
	finishItemButton.textContent = 'finished';
	finishItemButton.addEventListener('click', function (finishedClickEvent) {
	var finishedItem = finishedClickEvent.currentTarget.parentElement;
	for (var i=0; i<todoList.children.length; i++) {
	// remove the actual element
	if (todoList.children[i] === finishedItem) {
	todoList.removeChild(finishedItem);
	var finishedItemText = todoItems.splice(i, 1);
	finishedItems.push(finishedItemText);
	var newFinishedItemElement = document.createElement('li');
	var newFinishedItemLabel = document.createElement('p');
	newFinishedItemLabel.textContent = finishedItemText;

	newFinishedItemElement.appendChild(newFinishedItemLabel);
	finishedList.appendChild(newFinishedItemElement);
	}
	}
	});

	// handle removing the task
	var removeTodoItemButton = document.createElement('button');
	removeTodoItemButton.textContent = 'remove';
	removeTodoItemButton.addEventListener('click', function (removeClickEvent) {
	// get a reference to the button
	var itemToRemove = removeClickEvent.currentTarget.parentElement;
	for (var i=0; i<todoList.children.length; i++) {
	// remove the actual element
	if (todoList.children[i] === itemToRemove) {
	todoList.removeChild(itemToRemove);
	var removedItemText = todoItems.splice(i, 1);
	}
	}
	});

	// attach our new html
	todoListItem.appendChild(todoListItemLabel);
	todoListItem.appendChild(removeTodoItemButton);
	todoListItem.appendChild(finishItemButton);
	todoList.appendChild(todoListItem);
	});


	</script>


	</body>
	</html>