Interactive Web Pages with JavaScript Perform chapter is not working

At the end of Perform in Interactive Web Pages with JavaScript, the instructor is able to append and remove the tasks from the app. I am not able to do so. I have watched the episode 3x now and cannot figure out what I am missing. If you can please review my code and let me know what's off.

Thanks Steve

//Problem: User interaction doesn't provide desired results. //Solution: Add interactivty so the user can manage daily tasks.

var taskInput = document.getElementById("new-task"); //new-task var addButton = document.getElementsByTagName("button")[0];//first button var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks var completedTasksHolder = document.getElementById("complete-tasks");//completed-tasks

//New Task List Item var createNewTaskElement = function(taskString){ //Create List Item var listItem = document.createElement("li");

//input (checkbox) var checkBox = document.createElement("input");//checkbox //label var label = document.createElement("label"); //input (text) var editInput = document.createElement("input"); //button.edit var editButton = document.createElement("button"); //button.delete var deleteButton = document.createElement("button");

//Each element needs modifying

//Eachelement needs appended listItem.appendChild(checkBox); listItem.appendChild(label); listItem.appendChild(editInput); listItem.appendChild(editButton); listItem.appendChild(deleteButton);

return listItem;

}

//Add a new task var addTask = function() { console.log("Add task..."); //Create a new list item with the text from #new-task: var listItem = createNewTaskElement("Some New Task");

//Append listItem to incompleteTasksolder incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted);

}

//Edit an existing task console.log("Edit task..."); var editTask = function(){ //When the Edit button is pressed //if the class of the parent is .editmode //Switch from editMode //label text become the input's value //else //Switch to .editMode //input value becomes the label's text

//Toggle .editMode on parent

}

//Delete an existing task console.log("Delete task..."); var deleteTask = function() { var listItem = this.parentNode; var ul = listItem.parentNode;

//Remove the parent list item from the ul ul.removeChild(listItem);

}

//Mark a task as complete console.log("Task complete..."); var taskCompleted = function(){ //Append the task list item to the #completed-tasks var listItem = this.parentNode; completedTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete);

}

//Mark a task as incomplete console.log("Task incomplete..."); var taskIncomplete = function(){ //Append the task list item to the #incomplete-tasks var listItem = this.parentNode; incompleteTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted);

}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){ console.log("Bind list item events"); //select taskListItem's children var checkBox = taskListItem.querySelector("input[type=checkbox]"); var editButton = taskListItem.querySelector("button.edit"); var deletButton = taskListItem.querySelector("button.delete");

//bind editTask to edit button editButton.onclick = editTask;

//bind deleteTask to delete button deleteButton.onclick = deleteTask;

//bind checkBoxEventHandler to checkbox checkBox.onchange = checkBoxEventHandler; }

//Set the click handler to the addTask function addButton.onclick = addTask;