Project Challenge 1: Assigning a Click Event Handler

Assign a click event handler to the add button and generate an alert displaying the task added in the text box.

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("").

Get hands-on with 1200+ tech skills courses.