Build a to-do list app
Build a simple to-do list app using block-based or beginner coding tools to add, complete, and delete tasks while learning basic programming.
Step-by-step guide to build a to-do list app
Create a To-Do List App with JavaScript and Local Storage (Step-by-Step Tutorial)
Step 1
Open your block-based coding tool and start a brand-new project.
Step 2
Make a new list called "tasks" to hold all the to-do items.
Step 3
Add a text-input method by placing an input component or using the "ask" block so you can type a task.
Step 4
Create an "Add" button sprite or UI button on the screen.
Step 5
Program the "Add" button so that when it is clicked it takes the input text and adds it to the "tasks" list.
Step 6
Make a display area that shows each item from the "tasks" list as visible labels or sprites on the stage.
Step 7
Add a "Complete" control next to each displayed task and program it so clicking it changes the task's appearance to show it is done.
Step 8
Add a "Delete" control next to each displayed task and program it so clicking it removes that item from the "tasks" list.
Step 9
Test your app by adding three tasks to the list to check the Add Complete and Delete controls work.
Step 10
Save your project so you don't lose your work.
Step 11
Share your finished to-do list app on DIY.org
Final steps
You're almost there! Complete all the steps, bring your creation to life, post it, and conquer the challenge!
Help!?
I don't see an input component in my block tool — what can I use instead?
If your tool lacks an input component, use the "ask" block (or a sprite script that runs an "ask" prompt) to collect the text and then add the answer to the "tasks" list when the Add button is clicked.
My Add button runs but nothing appears in the display area — what should I check?
Make sure the Add button's script actually appends the input text to the "tasks" list and then rebuilds or refreshes the display area (for example by creating labels or clones for each item) so the new task becomes visible.
How can I adapt this to-do list activity for different ages?
For younger children, precreate the "tasks" list and use large Add/Complete/Delete sprites with simple one-line tasks, while older kids can add priority fields, due-date inputs, sorting routines, drag-and-drop reorder, or save/load using cloud or project variables before sharing.
What are simple ways to extend or personalize the to-do list app?
Personalize by making the "Complete" control change a task's color and play a sound, add tags or due dates stored alongside items in the "tasks" list, enable drag-and-drop or reorder functions in the display area, and implement save/load so the project persists before you save and share on DIY.org.
Watch videos on how to build a to-do list app
Beginner-Friendly To-Do List App Tutorial | Full Source Code Included!
4 Videos
Beginner-Friendly To-Do List App Tutorial | Full Source Code Included!
How to Make a To-Do List in Google Sheets (Step by Step) + FREE Template!
Build a Simple To-Do List App in Python
Create a Simple To - Do List App With code.org Tutorial
Facts about block-based programming for kids
✅ Most to-do apps are built on three simple actions: add a task, mark it complete (or toggle), and delete it.
🧩 Block-based tools like Blockly and Scratch hide tricky typing so kids can learn programming logic faster.
🧠 In code, a "list" stores tasks in order so your app can show items, add new ones, or remove finished tasks.
🌍 Scratch is used by millions around the world and hosts millions of user-created projects and games.
📝 Writing tasks down helps your brain — people who make lists are more likely to remember and finish jobs!
How do I build a simple to-do list app with block-based coding?
What materials and tools do I need to make a to-do list app with blocks?
What ages is building a block-based to-do list app suitable for?
What are the benefits of making a to-do list app with block coding?
One subscription, many ways to play and learn.
Only $0 after trial. No credit card required