Build a To-Do App (everything together)
2 min read
Time to build something real
You now know enough to build a working app. Let us make a simple To-Do list — add tasks, show them, and remember them even after a refresh. Every concept you learned shows up here.
The HTML
<input id="taskInput" placeholder="New task">
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
The JavaScript
let input = document.querySelector("#taskInput");
let addBtn = document.querySelector("#addBtn");
let list = document.querySelector("#taskList");
// load saved tasks (or start with an empty array)
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
function render() {
list.innerHTML = "";
tasks.forEach((task) => {
let li = document.createElement("li");
li.textContent = task;
list.appendChild(li);
});
localStorage.setItem("tasks", JSON.stringify(tasks));
}
addBtn.addEventListener("click", () => {
if (input.value.trim() === "") return;
tasks.push(input.value);
input.value = "";
render();
});
render();
Look at everything you just used
- variables (
tasks,input) - arrays + push to store tasks
- a function (
render) - the DOM (
querySelector,createElement,innerHTML) - events (
addEventListener) - forEach to show each task
- JSON + localStorage to remember them
That is real JavaScript — not theory, a working app.
Where to go now
- Add a "delete" button to each task (hint: another event +
filter). - Try a different project: a tip calculator, a quiz, or a weather app using
fetch. - Then take the JavaScript test on this platform, verify your skill, and earn your certificate.
You did it — you went from "what is JavaScript?" all the way to building an app. Keep building; that is how every developer truly learns. 🚀