Build a To-Do List App in 15 Minutes with Cursor AI

Published by

Pankaj Bisht

on

May 20, 2025

Here is the playbook.

Humans always get inspired by others, and I am no exception. These days, when everyone is experimenting with AI and large language models (LLMs), I am no exception. As a product manager, I am surrounded by developers who always discuss how AI is transforming coding and the tech landscape.

I had avoided the urge for a long time because, as a product person, I thought my primary motivation should be to understand the customer’s pain points, comprehend the problem space, and devise possible solutions.

However, I forgot that customer discovery always comes with validation, and one needs to experiment with prototypes to test the solution hypotheses.

I was always clear that, in the past, product managers or entrepreneurs used to rely on developers to create an MVP. Now, with AI, they can experiment independently and test their ideas, resulting in cost savings. I decided to take a plunge and get my hands dirty with coding, of course, with the assistance of AI.

Cursor AI and Google Gemini

I decided to start small. I chose the to-do list app as my first personal project. Among IDEs, I could have picked Windsurf, Devin, Replit Ghostwriter, etc. On LLMs, I had options of Grok, Claude ai, ChatGPT, etc.

But, I chose to use Cursor AI and Google Gemini for my mini-project. I am not getting into WHY. Cursor AI is an AI-powered IDE (often a fork of VS Code) that can help you write, debug, and refactor code much faster.

The general idea is to use Cursor’s AI chat and code generation features at various stages of development. From generating the basic HTML structure and styling with CSS to implementing the core JavaScript logic for adding, completing, and deleting tasks, Cursor AI was instrumental at every step.

I described the functionality I needed in natural language prompts, and it generated surprisingly accurate and efficient code snippets in seconds. This concept is also known as Vibe Coding, a term that has gained popularity recently.

Interface of My Task List app

Steps to Develop Your To-Do List App with Cursor AI

Assumed Stack (for simplicity, I used web technologies):

Frontend: HTML, CSS, JavaScript
IDE: Cursor AI

Setup Your Environment:

Install Cursor AI from their official website.
Create a new project folder (e.g., todo-app-cursor).
Open this folder in Cursor.
Create the basic files: index.html, style.css, script.js.
Cursor AI Prompt: You can ask Cursor to do this:

Create the basic file structure for a simple web project: 
- index.html 
- style.css 
- script.js 
Link the CSS and JS files in index.html.

Design the Basic HTML Structure (UI Elements):

You’ll need:

An input field for users to type their tasks.
An “Add Task” button.
An unordered list (<ul>) to display the tasks.

Cursor AI Prompt:

Generate the HTML for a to-do list app. 
It should include: 
1. A heading: "My To-Do List." 
2. An input field with a placeholder "Enter a new task". Give it an id 'taskInput'. 
3. An "Add Task" button next to the input field. Give it an id 'addTaskBtn'. 
4. An empty unordered list with an id 'taskList' where tasks will be displayed.

Cursor will generate the HTML. Review it, understand it, and then paste it into your index.html file.

Style the Application (CSS):

Make your app look presentable. Style the input, button, list, and list items.

Cursor AI Prompt (Iterative):

Start broad:

Generate basic CSS for the to-do list app. Style the body, heading, input field, button, and task list for a clean and modern look.

Get more specific:

1. In style.css, make the 'addTaskBtn' have a blue background and white text. 
2. Style list items in 'taskList' to have a light grey border and some padding. 
3. Add a style for a completed task (e.g., text strikethrough and lighter colour) using a class named '.completed'.

Review and apply the CSS to style.css.

Implement Core Functionality (JavaScript):

a. Adding a Task:

Get references to the input field, button, and task list.
Add an event listener to the “Add Task” button.

When clicked:

Get the text from the input field.
If the text is not empty, create a new list item (<li>).
Set the list item’s text to the task text.
Append the new list item to the task list.
Clear the input field.

Cursor AI Prompt:

In script.js, write JavaScript to: 
1. Get the DOM elements for 'taskInput', 'addTaskBtn', and 'taskList'. 
2. When the 'addTaskBtn' is clicked, retrieve the value from the 'taskInput'. 
3. If the input value is not empty, create a new <li> element, 
set its textContent to the input value, and append it to 'taskList'. 
4. Clear 'taskInput' after adding the task.

b. Marking a Task as Complete:

Add an event listener to the task list (event delegation is suitable here).
When a list item (<li>) is clicked, toggle a “completed” class on it.

Cursor AI Prompt:

In script.js, add functionality so that when a list item (<li>) inside 'taskList' is clicked, it toggles a CSS class named 'completed' on that list item.

c. Deleting a Task:

When creating a new task <li>, also create a “Delete” button (or an “X” icon) inside it.
Add an event listener to these delete buttons.
When a delete button is clicked, remove its parent <li> element from the taskList.

Cursor AI Prompt (can be a follow-up to the “add task” code):

Modify the JavaScript code for adding tasks. 
1. For each new task <li>, also append a <span> element with the text ' X' (or a delete button) that has a class 'delete-btn'. 
2. Add an event listener so that when a 'delete-btn' is clicked, its parent <li> element is removed from the 'taskList'.

d. Refinements and Additional Features (using Cursor AI):

Local Storage: To make tasks persist even after closing the browser.

Cursor AI Prompt:

Show me how to modify the script.js to save the current to-do list items to localStorage whenever a task is added or removed and load them when the page initially loads.

e. Editing Tasks:

Add functionality to edit existing tasks.

Cursor AI Prompt:

How can I add an 'edit' button to each task item that allows the user to modify the task text? Generate the necessary HTML, CSS, and JavaScript modifications.

f. Filtering Tasks (All, Active, Completed):

I added filters such as “All tasks,” “active tasks,” and “completed tasks.”

Cursor AI Prompt:

Add filter buttons (All, Active, Completed) to the HTML. Write JavaScript to filter the displayed tasks in 'taskList' based on their completion status when these buttons are clicked.

g. Debugging and Testing:

As you test your app, you’ll inevitably encounter bugs or unexpected behaviour.

Using Cursor AI for Debugging:

Paste Errors: Copy any error messages from your browser’s developer console directly into Cursor’s chat and ask, “What does this error mean, and how can I fix it in my code?”
Explain Code: If you’re unsure how a piece of AI-generated (or your own) code works, select it and ask Cursor to “Explain this code.”
Suggest Fixes: Describe the problem (e.g., “Tasks are not being deleted when I click the X button”) and ask for suggestions or potential fixes.
Refactor Code: “Refactor this JavaScript function to be more efficient or readable.”

h. Iteration:

Keep testing, getting feedback (even if it’s just your own), and iterating. Cursor AI can be your partner throughout this process for generating new feature ideas, helping implement them, and optimising existing code.

Tips for Working with Cursor AI:

Be Specific in Your Prompts: The more detail you provide, the better the AI’s output will be.
Iterate on Prompts: If the first result isn’t perfect, refine your prompt and try again.
Break Down Complex Tasks: For complex features, ask the AI to help with smaller, manageable parts.
Review and Understand: Don’t just blindly copy and paste AI-generated code. Review it, understand what it’s doing, and adapt it to your needs. This is how you learn and ensure the code is correct and secure.
Use the “Chat with Selection” or “Edit with AI” features: Cursor allows you to select specific code blocks and ask the AI to modify or explain them directly.
Use it as a Learning Tool: If the AI uses a concept you’re unfamiliar with, ask it to explain that concept.

Here’s a glimpse of the power I experienced:

Rapid Prototyping: I could quickly iterate on UI elements and styling by simply describing what I wanted. No more endless searching for CSS properties!
Logic Generation on Demand: Implementing JavaScript for task management felt significantly faster. Cursor understood my intent and provided functional code that I could then refine.
Instant Debugging Help: When I inevitably hit a snag (a missing semicolon here, a wrong variable there!), pasting the error into Cursor often yielded immediate explanations and suggested fixes.
Learning on the Fly: If Cursor used a piece of code I wasn’t entirely familiar with, I could ask it to explain the concept directly within the IDE. Talk about a learning accelerator!

Finally:

This little project is a testament to how AI is revolutionising the development workflow. For aspiring developers, seasoned engineers, and even those just tinkering with code, tools like Cursor AI can dramatically boost productivity and unlock new levels of creativity.

What are your experiences with AI-powered development tools? I’d love to hear your thoughts in the comments.

Product Management Blog – Pankaj Bisht