Project Challenge 5: Moving and Removing Tasks with Effects

Problem statement

In this challenge, we will add effects to the existing project. The task is as follows:

• When the user clicks on one of the done button elements, the corresponding parent task element from the “To-do” list fades out (1 second) and fades back in (1 second) to the end of the “Done” list.

• When the user clicks on one of the delete button elements, the corresponding parent task element fades out (1 second) and is deleted from the webpage.

Sample input

The sample input consists of two small steps:

1. The user clicks on the done button element.

2. The user clicks on the delete button element.

Sample output

Once the done button is clicked, the task fades out of the to-do list and fades back into the done list. Similarly, once the delete button is clicked, the task fades out and gets removed.

The sample output web page with the desired effects is shown here:

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.

📝 Note: You might have to move a few lines of existing code within the callback functions of the fade-out and fade-in effects.