MoreLesson 180Free preview

To Do List

This lesson is part of How To · All levels

Summary

This lesson discusses making a simple list of tasks that can add, mark, and delete items. JavaScript creates new elements of input values, pastes events through event delegation, and updates the view. To prevent data from being lost when a page reloads, the list can be stored in localStorage.

Key points

Use the form with the event submit so that the addition of the task also works via the keyboard
Create elements with createElement and text content using textContent to prevent HTML injection
Use event delegation on the container to handle the finish and remove buttons
Save the list to localStorage in JSON format and re-load it when the page opens

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.