Academy · Beginner · 15 min
JavaScript and the page: build a to-do list
Create elements, handle clicks and toggle classes to build a working to-do list.
The DOM is the live tree of elements in the page. JavaScript can create, change and remove them.
const li = document.createElement("li");
li.textContent = "Buy milk";
li.addEventListener("click", () => li.classList.toggle("done"));
document.getElementById("list").appendChild(li);
Steps in the example
- Read the text from the input box.
- Create a list item and set its text.
- Toggle a CSS class when it is clicked.
- Add it to the list.
Challenge
Save the list with localStorage so it is still there after a refresh. This is how the free Tasks & Planner on GM works.