Project Challenge 1: Assigning a Click Event Handler

Problem statement

In this lesson, we implement the concepts covered so far to begin with our project. To add a task in our to-do list web page, the user enters a new task in a text box and then clicks on the add button.

The task in this challenge is as follows:

• Assign a click event handler to the add button with an id of addTask.
• When the add button is clicked:
  • If the textbox is empty, generate an alert with the text “Error: Please enter a task before clicking the Add button”.
  • If the text box is not empty, generate an alert with the text containing the task name. For example, if the text in the input box is “Complete Assignment”, generate an alert with text “New Task: Complete Assignment”.
• Clear the text inside the text box after the add button is clicked.

📝 Note: The current value of the input box can be accessed using $("selector").val(). Additionally, the text present in the text box can be cleared out using $("selector").val("").

Sample input

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

Sample output

An alert with the text “New Task: Complete Assignment” is generated and the text box is cleared out.

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.