Interactive online courses HTML Academy
2026-03-09 14:08 Diff
https://htmlacademy.org/courses/javascript-browser/dom/to-do-list

We have already figured out events in JavaScript, and we did a great job with the popups and galleries. The boss has really come to appreciate our successes, and he has assigned us a new task that is more serious.

Meow! We have a new order. We need to program a to-do list app.

The layout is already prepared, but all of the rest depends on you:

  • A task is considered completed and disappears if the user clicks the checkbox.
  • If all of the tasks are completed, then a message should be displayed informing the user that there are no more tasks.
  • If a new task is added to an empty list, the message disappears.
  • 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.

Complete all of the work quickly and to high quality standards. I know you are up to the task. I look forward to the final result!

We have been entrusted with their service. And it wasn’t all that long ago when we wrote our first console.log()!

That’s enough with the sentimental reflections. We are professionals, after all. Let’s start with carrying out the project specifications. Let’s go through the items in the list. Let’s figure out how to remove the completed tasks. In order to perform actions with tasks, we need to know how to find them and write them as variables. We already know how to do this. The list itself is an element with the todo-list class, and each list item has the todo-list-item class.

Find the list and each task in the list using querySelector and querySelectorAll, and make sure that everything has been completed correctly.

We already learned about querySelectorhere, and we also covered querySelectorAllhere.