Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

Burhanuddin Oanali
Burhanuddin Oanali
9,939 Points

Guidance

Some days back I had totally given up on this Javascript course as I found it very difficult to follow.

I went and watched the videos more than 5 times and finally its now getting into my head.

I managed to create the to do list appication without referring to the teacher's code. Most of the code looks same..if someone can help to identify if I have made any mistakes in my code..or if I have repetition of code..

// Problem: No user interactivity!
// Solution: Add user interactivity!

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

/**********************************
   Creating a new list item
**********************************/

var addListItem = function() {

   var listItem = document.createElement ("li");

   var checkBox = document.createElement("input"); // Type: checkbox
   var label = document.createElement("label"); 
   var editInput = document.createElement("input"); // Type: text
   var editButton = document.createElement ("button"); // Edit
   var deleteButton = document.createElement ("button"); // Delete

      /**********************************
                Modify Elements
      **********************************/     

      checkBox.type = "checkbox";
      editInput.type = "text";

      label.innerText = taskInput.value;

      editButton.innerText = "Edit Task";
      editButton.className = "edit";

      deleteButton.innerText = "Delete Task";
      deleteButton.className = "delete";



      /********************************************
      Append the children to its parent (listItem)
      ********************************************/

      listItem.appendChild(checkBox);
      listItem.appendChild(label);
      listItem.appendChild(editInput);
      listItem.appendChild(editButton);
      listItem.appendChild(deleteButton);

   return listItem;

}
/**********************************
     Adding user interactivity 
**********************************/

// Add Task
var addTask = function() {

   // Print a test message to console.log to check if the function is triggering on clicking add button.
   console.log ("Adding new task..");

   // Create a new list item..
   var listItem = addListItem();

   // Append listItem to incomplete-tasks ul
   incompleteTasksHolder.appendChild(listItem);

   // Clear the task input's value after adding task
   taskInput.value = " ";

   // Bind the list item to complete-tasks ul when the task is checked.
   bindTaskEvents (listItem, completeTasks);  



}

// Edit a task

var editTask = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Editing Task");

   var listItem = this.parentNode;
   var editInput = listItem.querySelector("input[type=text]");
   var label = listItem.querySelector ("label");
   var editButton = listItem.querySelector("button.edit");

   if (listItem.classList.contains("editMode")) {
         // Switch from editMode
         listItem.classList.toggle("editMode");
         // Label text becomes the input's value.
         label.innerText = editInput.value;
         editButton.innerText = " Edit Task "

}
   else {
         // Switch to edit mode..
         listItem.classList.toggle("editMode");

         // Input's value becomes the label text.
         editInput.value = label.innerText;
         editButton.innerText = " Save Task ";
   }     

}

// Delete a task

var deleteTask = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Deleting Task");
   // When the delete button is pressed..

   var listItem = this.parentNode;
   var ul = listItem.parentNode;

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


}
// Mark task as complete

var completeTasks = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Completing Task");
   // When the checkbox is marked as checked..
   // Append the task list item to the completed-tasks ul.
   var listItem = this.parentNode;
   completedTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, incompleteTasks);
} 

// Mark task as incomplete

var incompleteTasks = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Incomplete Task");
   // When the checkbox is unchecked..
   // Append the task list item to the incomplete-tasks ul.
   var listItem = this.parentNode;
   incompleteTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, completeTasks);

}
/************************************
         Triggering Events
************************************/

addButton.addEventListener("click", addTask);


/******************************************************************************
Bind the list item's children to a particular event (eg editButton to editTask)
******************************************************************************/

   var bindTaskEvents = function(taskListItems, checkBoxEventHandler) {
      // Select list item's children
      var checkBox = taskListItems.querySelector("input[type=checkbox]");
      var editButton = taskListItems.querySelector("button.edit");
      var deleteButton = taskListItems.querySelector("button.delete");
      // Bind the childern to a particular event when triggered.
      checkBox.onchange = checkBoxEventHandler;
      editButton.onclick = editTask;
      deleteButton.onclick = deleteTask
   }


// Cycle over the incompleted tasks holder
   for (var i = 0; i<incompleteTasksHolder.children.length; i++) {
      bindTaskEvents(incompleteTasksHolder.children[i], completeTasks);
   }

// Cycle over the completed tasks holder
    for (var i = 0; i<completedTasksHolder.children.length; i++) {
      bindTaskEvents(completedTasksHolder.children[i], incompleteTasks);
   }

2 Answers

Hello,

does your code give you any errors when you run it?

I have put your code in the correct markdown so people can see it more easily :).

// Problem: No user interactivity!
// Solution: Add user interactivity!

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

/**********************************
   Creating a new list item
**********************************/

var addListItem = function() {

   var listItem = document.createElement ("li");

   var checkBox = document.createElement("input"); // Type: checkbox
   var label = document.createElement("label"); 
   var editInput = document.createElement("input"); // Type: text
   var editButton = document.createElement ("button"); // Edit
   var deleteButton = document.createElement ("button"); // Delete

      /**********************************
                Modify Elements
      **********************************/     

      checkBox.type = "checkbox";
      editInput.type = "text";

      label.innerText = taskInput.value;

      editButton.innerText = "Edit Task";
      editButton.className = "edit";

      deleteButton.innerText = "Delete Task";
      deleteButton.className = "delete";



      /********************************************
      Append the children to its parent (listItem)
      ********************************************/

      listItem.appendChild(checkBox);
      listItem.appendChild(label);
      listItem.appendChild(editInput);
      listItem.appendChild(editButton);
      listItem.appendChild(deleteButton);

   return listItem;

}
/**********************************
     Adding user interactivity 
**********************************/

// Add Task
var addTask = function() {

   // Print a test message to console.log to check if the function is triggering on clicking add button.
   console.log ("Adding new task..");

   // Create a new list item..
   var listItem = addListItem();

   // Append listItem to incomplete-tasks ul
   incompleteTasksHolder.appendChild(listItem);

   // Clear the task input's value after adding task
   taskInput.value = " ";

   // Bind the list item to complete-tasks ul when the task is checked.
   bindTaskEvents (listItem, completeTasks);  



}

// Edit a task

var editTask = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Editing Task");

   var listItem = this.parentNode;
   var editInput = listItem.querySelector("input[type=text]");
   var label = listItem.querySelector ("label");
   var editButton = listItem.querySelector("button.edit");

   if (listItem.classList.contains("editMode")) {
         // Switch from editMode
         listItem.classList.toggle("editMode");
         // Label text becomes the input's value.
         label.innerText = editInput.value;
         editButton.innerText = " Edit Task "

}
   else {
         // Switch to edit mode..
         listItem.classList.toggle("editMode");

         // Input's value becomes the label text.
         editInput.value = label.innerText;
         editButton.innerText = " Save Task ";
   }     

}

// Delete a task

var deleteTask = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Deleting Task");
   // When the delete button is pressed..

   var listItem = this.parentNode;
   var ul = listItem.parentNode;

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


}
// Mark task as complete

var completeTasks = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Completing Task");
   // When the checkbox is marked as checked..
   // Append the task list item to the completed-tasks ul.
   var listItem = this.parentNode;
   completedTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, incompleteTasks);
} 

// Mark task as incomplete

var incompleteTasks = function() {

   // Print a test message to console.log to check if the function is triggered
   console.log("Incomplete Task");
   // When the checkbox is unchecked..
   // Append the task list item to the incomplete-tasks ul.
   var listItem = this.parentNode;
   incompleteTasksHolder.appendChild(listItem);
   bindTaskEvents(listItem, completeTasks);

}
/************************************
         Triggering Events
************************************/

addButton.addEventListener("click", addTask);


/******************************************************************************
Bind the list item's children to a particular event (eg editButton to editTask)
******************************************************************************/

   var bindTaskEvents = function(taskListItems, checkBoxEventHandler) {
      // Select list item's children
      var checkBox = taskListItems.querySelector("input[type=checkbox]");
      var editButton = taskListItems.querySelector("button.edit");
      var deleteButton = taskListItems.querySelector("button.delete");
      // Bind the childern to a particular event when triggered.
      checkBox.onchange = checkBoxEventHandler;
      editButton.onclick = editTask;
      deleteButton.onclick = deleteTask
   }


// Cycle over the incompleted tasks holder
   for (var i = 0; i<incompleteTasksHolder.children.length; i++) {
      bindTaskEvents(incompleteTasksHolder.children[i], completeTasks);
   }

// Cycle over the completed tasks holder
    for (var i = 0; i<completedTasksHolder.children.length; i++) {
      bindTaskEvents(completedTasksHolder.children[i], incompleteTasks);
   }