Build a Modern Todo App with JavaScript: Complete Guide
Description
Modern Todo Application with Pure JavaScript
This prompt guides you through creating a full-featured task management web application using HTML5, CSS3, and vanilla JavaScript.
Who Should Use This
- Beginner to intermediate web developers
- Those looking to master CSS Grid and Flexbox
- Developers learning localStorage API
Key Features
- Full CRUD functionality: add, edit, delete, and complete tasks
- Task categorization: color-coding and priority levels (low/medium/high)
- Drag-and-drop: reorder tasks by dragging
- Dark/light theme: respects system preferences
- localStorage: persistent data between sessions
>_ 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.