Build a To-Do List Web App
The first real interactive app most software engineers ever build — small enough to finish in one sitting, big enough to teach the core pattern behind almost every website.
Related field: Software Engineering
Mission Briefing
Objective
Build a webpage where you can type a task, add it to a list by clicking a button, and remove it by clicking on it.
Constraints
- Must use a free, no-install online code editor (like CodePen, JSFiddle, or repl.it)
- Must use HTML, CSS, and JavaScript — no external libraries or frameworks
- Adding and removing items must both work without reloading the page
Concept You're Testing
Event-driven programming — the pattern behind almost every interactive website: wait for a user action (a click), then run code that changes what's on the page in response.
What You'll Need
- A computer with a web browser
- A free online code editor, like CodePen, JSFiddle, or repl.it — no installation or account required for most of these
Instructions
- 1In the HTML panel, add a text input box, an "Add" button, and an empty list element to hold the tasks.
- 2In the JavaScript panel, write a function that runs when the "Add" button is clicked.
- 3Inside that function, read the current text from the input box.
- 4Create a new list item containing that text and add it to the list on the page.
- 5Clear the input box so it's ready for the next task.
- 6Add a click event to each list item so clicking it removes that item from the list.
- 7Test it: add several tasks, then remove a few by clicking on them, in a different order than you added them.
How to Measure Results
Success is functional: you can add multiple tasks in a row, and click any individual task to remove just that one, without the page reloading or other tasks disappearing.
Skills You'll Practice
- Reading user input and using it to change the page
- Event listeners — running code in response to a click instead of top to bottom
- Basic DOM manipulation — adding and removing elements from a webpage with code
- Debugging by testing one small piece (like just adding) before adding the next piece (like removing)
If It Doesn't Work the First Time
That's normal — this challenge follows the same design process real engineers use. A failed test just tells you where to go back and improve.
Figure out what problem you're actually solving, and what would even count as success. Skip this step and jump straight to building, and a lot of bad designs happen right here.