Project Challenge 2: Adding a Task in the To-Do List

Problem statement

In our last project challenge, we were able to extract the task entered in the text box when the user clicks the add button. In this challenge, we will add the extracted task and display it at the end of the to-do list.

The task in this challenge is as follows:

• When the add button is clicked, and the text of the text box is not empty:

  • Create a div task element with the class set to task and the text equal to the value of the input box.

  • Create a delete button element with the id set to delete and the class set to fas fa-trash-alt. This class corresponds to the trashcan icon in CSS.

  • Create a done button element with the id set to done and the class set to fas fa-check. This class corresponds to the check icon in CSS.

  • Insert the delete and the done button elements at the end of the newly created task element.

  • Finally, insert the div task element at the end of the div element with class notCompleted.

This will add the new task element, along with its children button elements, to the DOM tree and the new task can then be seen on the webpage.

Note: The styling of all the elements has been done for you, so you can focus on the jQuery code.

Sample input

Enter “Complete Assignment” in the input box and click the add button.

Sample output

The task “Complete Assignment” appears at the end of the to-do list, with one button for deleting the task and another for marking the task as done.

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.