Console Quirks

//PLANNING: 

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("completed-tasks"); //completed-tasks

//Add a new task

var addTask = function() {
console.log("Add Task...");

    //#new-task
//when button is pressed    //create a task  
  //(createe a new list item with the text from #new-task.
    //input checkbox 
    //label
    //input[text]
    //button .edit
    //button .delete
    //Each elent will need to be modified and appended.         
}

//Edit an exisiting task

var editTask = function() {

console.log("Edit Task...");
  //when the edit button is pressed ,   //if the class of the parent is .editmode
      //switch from .editMode
        //label text become the input's value
      //switch to .editMode
        //input value becomes the label's text.                 //toggle .editMode  

}

//Delete an existing task.

var deleteTask = function() {

console.log("Delete Task...");
  //when the delete button is pressed
    //remove the parent list item (li)  
    //
}

var taskCompleted = function() {

console.log("Completed Task...");
//Mark a task as complete.
  //when the checkbox is checked
     //append the task list item to the #completed-tasks
}

var taskIncomplete = function() {

console.log("Incompleted Tasks. Task...");
//Mark a task as incomplete.
   //when the checkbox is unchecked 
     //append the task to incomplete tasks. 
}


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

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {

 console.log("bind list items...");
 //select list items children
 var checkbox = taskListItem.querySelector("input[type=checkbox]");
 var editButton = taskListItem.querySelector("button.edit");
 var deleteButton = taskListItem.querySelector("button.delete");


    // bind the editTask to edit button
    editButton.onclick = editTask;
    // bind the deleteTask to the delete button
    deleteButton.onclick = deleteTask;
    // bind the taskCompleted to the checkbox
    checkbox.onchange = checkBoxEventHandler;
/**/


}

//Cycle over the incompletesTaskHolder ul list items

for (var i=0; i < incompleteTasksHolder.children.length; i++) {

     //bind events to list items children(taskCompleted)
     bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
    }
//Cycle over the completeTasksHolder ul list items
  //for each li 
for (var i=0; i < completedTasksHolder.children.length; i++) {
    // bind events to list items children (taskIncomplete)
    bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
   }