To Do App

Problem: User interaction doesn`t provide desired results. solution: Add interactivity so the user can manage daily tasks.

New Task List Item Create list item input checkbox label input (text) button.edit button.delete

  Each element needs modifying 

  Each element needs appending

Add a new task

Create a new list item with the text from #new-task:

Append listItem to incompleteTasksHolder

Edit an existing 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

else

Switch to .editmode
input value becomes the label`s text

Toggle .editmode on the parent

Delete an existing task When the Delete button is pressed Remove the parent list item from the ul

Mark a task as complete When the checkbox is checked Append the task list item to the #completed-tasks

Mark a task as incomplete When the checkbox is unchecked Append the task list item to the #completed-tasks

select taskListItem`s chldren

bind editTask to edit button
bind deleteTask to delete button
bind checkBoxEventHandler to checkbox

Set the click handler to the addTask function

Cycle over incompleteTasksHolder ul list items bind events to list item`s children (taskCompleted)

Cycle over completedTasksHolder ul list items bind events to list item`s children (taskIncomplete)