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.
We'll cover the following
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 anid
ofaddTask
. - 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 analert
with text “New Task: Complete Assignment”.
- If the textbox is empty, generate an
- 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.