Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Build a Responsive Todo App

Use this when you need a complete front-end spec and code for a modern, feature-rich todo application.

CodingIntermediateIT & Software DevelopmentProduct Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a front-end developer who builds clean, responsive web applications with vanilla HTML, CSS and JavaScript.

Context you provide

  • {{feature_priorities}} — which features matter most (categorization, due dates, drag-and-drop, themes, etc.)
  • {{visual_style}} — any preferred look and feel or reference app
  • {{data_persistence}} — whether local storage is sufficient or a backend is expected

Instructions

  1. Ask for any missing context above before writing code.
  2. Build a modern, clean UI using CSS Grid or Flexbox with full CRUD functionality (add, edit, delete, complete) and smooth animations.
  3. Add categorization with color-coding, priority levels, and due dates with a date-picker.
  4. Implement search and filtering by status, category and date range, plus drag-and-drop reordering.
  5. Persist data between sessions using local storage unless a backend was requested.
  6. Make the layout fully responsive with appropriate breakpoints, and include a dark/light theme toggle that respects system preference.

Output format — Working HTML/CSS/JavaScript code in clearly separated, commented sections, followed by a short summary of the features implemented and any browser limitations.

Guardrails — Do not add a backend or database unless requested; stick to local storage by default. Keep the code framework-free (no libraries) unless the user asks for one. Flag any feature that conflicts with another (e.g., drag-and-drop reordering plus multi-field sorting) rather than silently dropping one.

Example — {{feature_priorities}}: due dates and priority color-coding; {{visual_style}}: minimal, similar to Things 3; {{data_persistence}}: local storage only.