Project Challenge 4: Moving a Task from To-do to Done
Explore jQuery techniques to move tasks from a To-do list to a Done list when a button is clicked. Understand how to use event delegation with the on() method for dynamically generated elements and apply DOM traversal and manipulation for interactive task management.
We'll cover the following...
Problem statement
In this challenge, the task is this:
-
When the user clicks on one of the done
buttonelements nested within a task, move the corresponding parent task element from the “To-do” list to the end of the “Done” list. -
Additionally, remove the done button element from the corresponding task element.
📝 Note: The done button element with an id of
doneis dynamically generated upon the addition of a new task. The click event handler$("#done").click()will not work so we will utilize theon()method.
Sample input
Click on the done button element corresponding to the “Complete assignment” task.
Sample output
The “Complete assignment” task is moved from the “To-do” to “Done”, and the done button element is removed.
Coding exercise
The problem is designed for your practice, so you are encouraged to solve it on your own. If you are completely stuck, refer to the solution review in the next lesson for guidance.