The to-do app is the "hello world" of real apps: state, events, rendering and persistence in 40 lines. Every fresher portfolio should have one — customized.
The architecture
One state array + one render function. Every action mutates state, then re-renders. This is the exact mental model React formalizes.
let tasks = JSON.parse(localStorage.getItem("tasks") ?? "[]");
function save() { localStorage.setItem("tasks", JSON.stringify(tasks)); }
function render() {
list.innerHTML = "";
tasks.forEach((t, i) => {
const li = document.createElement("li");
li.textContent = t.text;
li.className = t.done ? "done" : "";
li.onclick = () => { tasks[i].done = !tasks[i].done; save(); render(); };
list.append(li);
});
}
form.onsubmit = (e) => {
e.preventDefault();
tasks.push({ text: input.value.trim(), done: false });
input.value = "";
save(); render();
};
render();Make it portfolio-worthy
- Add filters (all / active / done) and a task counter
- Add due dates and sort by them
- Style it properly and deploy — see free hosting guide
A working version ships as a template in our Playground — remix it.
← All Articles