0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We managed to display a message. Now let’s figure out how to add a task:</p>
1
<p>We managed to display a message. Now let’s figure out how to add a task:</p>
2
<ul><li>A task is considered completed and disappears if the user clicks the checkbox.</li>
2
<ul><li>A task is considered completed and disappears if the user clicks the checkbox.</li>
3
<li>If all of the tasks are completed, then a message should be displayed informing the user that there are no more tasks.</li>
3
<li>If all of the tasks are completed, then a message should be displayed informing the user that there are no more tasks.</li>
4
<li>If a new task is added to an empty list, the message disappears.</li>
4
<li>If a new task is added to an empty list, the message disappears.</li>
5
<li>To add a new task, you must enter a description in the input field and press “Add task”. The task will then appear at the end of the list.</li>
5
<li>To add a new task, you must enter a description in the input field and press “Add task”. The task will then appear at the end of the list.</li>
6
</ul><p>The task is added using the form, which consists of an input field and a button. The user must write the task text and then click the button. As a result, the task is added to the list. It is not added itself. It needs some assistance.</p>
6
</ul><p>The task is added using the form, which consists of an input field and a button. The user must write the task text and then click the button. As a result, the task is added to the list. It is not added itself. It needs some assistance.</p>
7
<p>Take a look at the markup. The button attribute is located inside the submit form. This means that clicking it will cause data from the form to be sent to the server.</p>
7
<p>Take a look at the markup. The button attribute is located inside the submit form. This means that clicking it will cause data from the form to be sent to the server.</p>
8
<p>You can set up a function to catch the clicks on this button to add a task. However, there is a more universal approach: use the submit special event. It is triggered every time that the form is submitted. This event is universal because sometimes the form can be submitted not just by clicking on a button, but by pressing a certain key. For example, “Enter”.</p>
8
<p>You can set up a function to catch the clicks on this button to add a task. However, there is a more universal approach: use the submit special event. It is triggered every time that the form is submitted. This event is universal because sometimes the form can be submitted not just by clicking on a button, but by pressing a certain key. For example, “Enter”.</p>
9
<p>Find the form in the markup, add the submit event handler to it, and make sure that the event is triggered.</p>
9
<p>Find the form in the markup, add the submit event handler to it, and make sure that the event is triggered.</p>
10
<p>The user can try to submit the form without completing the field. Usually, the contents of the fields on this form will be verified in order to make sure that the form is not submitted “empty.” But this is not what we will do. Our web designer added the required attribute to the field. It makes entering the text in the field mandatory. The form submission event is triggered only when there is some sort of string in this field.</p>
10
<p>The user can try to submit the form without completing the field. Usually, the contents of the fields on this form will be verified in order to make sure that the form is not submitted “empty.” But this is not what we will do. Our web designer added the required attribute to the field. It makes entering the text in the field mandatory. The form submission event is triggered only when there is some sort of string in this field.</p>