A to-do list is the classic first project for a reason.
Direct answer
A to-do list app needs an input, a button, a list and a few functions: add a task, toggle done, delete and save. Keep tasks in an array, render the array to the page and save it to localStorage after every change.
HTML
<form id="form">
<input id="text" placeholder="Add a task" required>
<button>Add</button>
</form>
<ul id="list"></ul>
JavaScript
const form = document.querySelector("#form");
const text = document.querySelector("#text");
const list = document.querySelector("#list");
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
function save() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function render() {
list.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task.text;
if (task.done) li.style.textDecoration = "line-through";
li.addEventListener("click", () => {
task.done = !task.done;
save();
render();
});
const del = document.createElement("button");
del.textContent = "Delete";
del.addEventListener("click", (e) => {
e.stopPropagation();
tasks.splice(index, 1);
save();
render();
});
li.append(del);
list.append(li);
});
}
form.addEventListener("submit", (e) => {
e.preventDefault();
tasks.push({ text: text.value, done: false });
text.value = "";
save();
render();
});
render();
Ideas to extend it
- Edit a task.
- Filter all, active and done.
- Add due dates.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
Small app, big lessons. Build it, then change it.
