CodingCodeIntermediate

Create a Responsive Todo App

Build a feature-rich todo app using HTML5, CSS3, and vanilla JavaScript, covering full CRUD, categorization, priorities, due dates, reminders, local storage, search, drag-and-drop, theme toggle, and responsive design.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

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.

Use Cases

Personal task managementTeam project to-dosStudy plan trackingDaily life organization

Reference Output

An interactive todo single-page app supporting full CRUD, drag-and-drop, categorization, priorities, due dates, search/filter, dark/light theme, and responsive layout.

Scoring Rubric

1. Feature completeness: Are all CRUD operations implemented? 2. Drag-and-drop: Is drag/drop smooth and accurate? 3. Search/filter: Does it support multi-dimensional filtering? 4. Responsive: Does it adapt well across screen sizes? 5. Theme toggle: Does it respect system preferences? 6. UX: Are micro-interactions and transitions natural?