💻 Coding & Development

Todo List

📁 Coding & Development 👤 Contributed by @f 🗓️ Updated 2026-04-19

The prompt

Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'll create a comprehensive todo app with all the features you've requested. The app will use CSS Grid for the layout with a clean, modern design including a header, sidebar for filters, and main content area. I'll implement local storage to persist tasks, use the HTML5 Drag and Drop API for reordering, and add smooth CSS transitions for all interactions. The color scheme will use CSS variables for easy theme switching, and I'll include media queries for mobile responsiveness at 768px and 480px breakpoints.

✨ Claude

I can help you build this todo app, though I should note that implementing all these features comprehensively would result in quite a large codebase. I'll provide a well-structured foundation with the core CRUD operations, localStorage persistence, and responsive design using CSS Grid. For the date-picker and notifications, I'll use native HTML5 features rather than external libraries to keep it vanilla JavaScript as requested.

💎 Gemini

Here's a complete todo app implementation with HTML5, CSS3, and vanilla JavaScript. The app uses CSS Grid for layout, implements CRUD operations with localStorage persistence, includes drag-and-drop reordering via the HTML5 API, and features a theme toggle using CSS custom properties. All animations use CSS transitions, and the responsive design includes breakpoints at 768px and 1024px for optimal viewing across devices.

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.

How to customize this prompt

Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).

Common use cases

Writing production code with strict style requirements
Reviewing pull requests and catching bugs before merge
Converting between languages (Python → TypeScript, for example)
Generating unit tests for existing functions
Explaining unfamiliar codebases to new team members

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).