Make a To-Do List App With AI, Step by Step

August 19, 2026

A to-do list app is one of the best first projects with an AI assistant, and you can have a version that saves your tasks in the browser in about an hour. You will ask for one HTML file, test it, and add features in small steps. The tasks are stored on your own device, so no account or server is involved.

The project teaches an idea that shows up in almost every app: data that has to survive after you close the page.

Start with a plain description

Decide what the first version must do and nothing more. For a to-do list, that is usually:

• Add a task by typing and pressing Enter.
• Mark a task as done.
• Delete a task.
• Keep the list after the page is closed and reopened.

Anything else, such as due dates, categories or reminders, can wait. Starting small gives you a working tool quickly, and every addition after that is easy to test.

The first prompt

Create a to-do list web app as one HTML file with CSS and JavaScript inside.
Features: a text field to add a task (Enter key or an Add button), a list of tasks with a checkbox to mark each done (done tasks get a line through them), and a delete button on each task.
Save the tasks in the browser using localStorage so they are still there after a reload.
Ignore empty tasks. Trim extra spaces.
Design: simple, one column, readable on a phone, with generous spacing.
Explain in two sentences how localStorage works and where my data is stored.

That last line is a useful habit. Asking the assistant to explain one concept per project gradually builds your understanding without requiring a course.

Save, open and test

Copy the code into a file named index.html in a new folder, then open it in your browser. Run through this checklist:

1. Add three tasks. They should appear in order.
2. Check one off. It should look different.
3. Delete one. It should disappear.
4. Reload the page. The tasks should still be there.
5. Press Add with the field empty. Nothing should happen.
6. Type only spaces and add. Nothing should happen.

If step 4 fails, the storage part is wrong. Tell the assistant: “After reloading, my tasks disappear. The checked state also does not persist.” Mention both symptoms, since they often share a cause.

Understand what localStorage means for your data

Your tasks are saved inside this browser, on this device. That has consequences worth knowing:

• Another browser or your phone will show an empty list.
• Clearing browser data erases the tasks.
• Private browsing windows usually discard the data when closed.
• Anyone using your browser can see the list.

For a personal list, that is fine. If you later want the list on several devices, you need a service that stores data online, which is a bigger step. Ask the assistant for options and tradeoffs before choosing.

Add features one at a time

When the basics pass, add a feature per message. Good candidates:

1. Edit a task. “Let me double-click a task’s text to edit it. Save on Enter, cancel on Escape.”
2. Filter. “Add buttons to show All, Active, or Completed tasks.”
3. Counter. “Show how many tasks are left.”
4. Clear completed. “Add a button to remove all done tasks, with a confirmation.”

Test each right after you add it, and retest the earlier checklist items, especially reload persistence. New features most often break saving, because the code that stores the list has to include whatever you just added.

Fix problems with clear reports

When something fails, give the assistant three pieces of information: what you did, what you expected, and what happened. For example: “I checked a task, reloaded, and it was unchecked again. I expected it to stay checked.”

If the page is blank or a button is dead, open the Console in your browser’s developer tools and copy any red error text into the chat. Real error messages narrow down the cause quickly.

Avoid asking for a complete rewrite when one thing is wrong. A full rewrite changes things you have already tested, which means you have to test them again.

Keep a record

Before each change, copy your file with a new name, such as todo-v1.html, todo-v2.html. Open a notes file and add a line each time: the date, what you asked for, and whether it worked. Those few lines make it easy to recover if something breaks, and they become a useful reference for later projects.

Make it look like yours

Visual changes are low risk and satisfying. Ask for a color theme, a different font, rounded corners or a dark mode. Because these requests rarely affect the logic, you can try several and keep the one you like. Just confirm afterward that saving and deleting still work.

Review the code once, lightly

You do not need to read every line, but a light review pays off. Ask the assistant: “List the main parts of this file and say in one sentence what each does.” You will usually get a short outline such as the HTML structure, the styles, the function that adds a task, and the function that saves the list.

Then try a small experiment. Pick one visible detail, such as the placeholder text in the input field, and find where it lives in the file. Change it yourself, save, and reload. Making one tiny edit by hand shows you that the file is not magic, just text, and it makes later conversations with the assistant more precise. You can say “change the heading near the top” instead of describing the whole page.

If the outline mentions anything you do not recognize, ask about it directly. Questions are free, and the answers stay in the conversation for later.

What to do next

Build the four-feature version, run the six-step checklist, and add one extra feature from the list. Once the app feels solid, try using it for real for a week. Real use turns up the small annoyances that testing misses, such as a tiny delete button or a missing way to reorder tasks. Write each annoyance down, then fix them one at a time in later sessions.