A to-do list app makes one of the best first projects for young coders. It's simple enough that a 10-year-old can finish it in an afternoon, yet it teaches real skills like working with the DOM, handling clicks, and making a page react to what the user types.
I've seen kids move from "what's a function?" to showing off a working app in one session. That first moment when they type a task, hit the button, and watch it appear? Pure magic.
If your child has read our guide on what JavaScript is, they're ready to try this. Let's build it together.
Setting Up the HTML Structure
Every web project starts with HTML. For a to-do list we only need three main pieces: a box to type in, a button to add the task, and a spot to show the list.
<!DOCTYPE html>
<html>
<head>
<title>My To-Do List</title>
<style>
.done {
text-decoration: line-through;
color: gray;
}
li {
cursor: pointer;
padding: 8px;
font-size: 18px;
list-style: none;
margin: 4px 0;
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="What do you need to do?">
<button id="addButton">Add Task</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>
Save this as index.html. Open it in a browser. Right now it looks like a blank stage. The JavaScript will bring it to life.
Writing the JavaScript to Add Tasks
Create a file called app.js in the same folder and add this code:
let input = document.getElementById('taskInput');
let button = document.getElementById('addButton');
let list = document.getElementById('taskList');
button.addEventListener('click', function() {
let taskText = input.value.trim();
if (taskText === '') {
return;
}
let li = document.createElement('li');
li.textContent = taskText;
// Click task to mark done
li.addEventListener('click', function() {
li.classList.toggle('done');
});
list.appendChild(li);
input.value = '';
});
getElementById lets JavaScript find the pieces on the page. addEventListener waits for a click. trim() removes extra spaces so blank tasks don't get added. Save both files, refresh the browser, and test it. The first time a task appears on screen is always a big moment.
Adding a Delete Button to Each Task
A list that only gets longer isn't much fun. Let's give every task its own delete button. Replace the part where you create the list item with this updated version:
let li = document.createElement('li');
li.textContent = taskText;
// Click task to mark done
li.addEventListener('click', function() {
li.classList.toggle('done');
});
let deleteBtn = document.createElement('button');
deleteBtn.textContent = 'X';
deleteBtn.style.marginLeft = '15px';
deleteBtn.style.fontSize = '14px';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); // so it doesn't also mark as done
li.remove();
});
li.appendChild(deleteBtn);
list.appendChild(li);
Each button knows which task it belongs to. When clicked, it removes just that item. This small change turns the project into something that feels like a real app.
This project also gives kids a gentle introduction to the ideas covered in our post on arrays for beginners. Even though we're using the DOM list instead of an array, the idea of adding and removing items is the same.
What to Build Next
Once the basic to-do list works, kids usually want to keep going. A great next step is saving tasks with localStorage so they stay even after refreshing the page. That teaches how data can be remembered by the browser.
They could also try one of our other step-by-step projects that reuse the same skills:
- Build a Quiz Game in JavaScript: adds scoring and multiple questions
- Make Your First Video Game with JavaScript: moves from lists to movement and collisions
Our article on keeping kids motivated when coding gets tough has more ideas for keeping that excitement alive after the first win.
Is 10 the Right Age?
Most kids who can type at a decent speed and follow instructions step by step are ready at 10. The whole program is only about 35 lines. The real skills are patience and spotting small mistakes like a missing parenthesis.
If typing still feels slow, spend a little time on keyboard practice first. Our post Why Typing Speed is Essential for Young Coders explains why it matters so much.
For kids who are excited but want extra help and instant feedback, Learnspace offers guided JavaScript lessons with a built-in editor. Sign up for Learnspace and let them build projects they're proud to show friends and family.