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.