Skip to main content
Prompts Responsive Vanilla JS Todo App Creator

developer coding user risk: low

Responsive Vanilla JS Todo App Creator

Create a responsive todo app using HTML5, CSS3, and vanilla JavaScript with a modern UI via CSS Grid/Flexbox. Implement CRUD functionality, task categorization, priority levels, du…

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.

EXPECTED OUTPUT

Format
html

SUCCESS CRITERIA

  • Create responsive todo app with HTML5 CSS3 vanilla JS
  • Implement full CRUD for tasks
  • Use CSS Grid Flexbox for UI
  • Add task categorization color-coding priority levels
  • Include due dates date-picker reminders
  • Use localStorage for persistence
  • Implement search filters for status category date
  • Add drag drop reordering with HTML5 API
  • Ensure fully responsive with media queries
  • Include dark light theme toggle
  • Add micro-interactions transitions

FAILURE MODES

  • Using libraries frameworks instead of vanilla JS
  • Incomplete CRUD implementation
  • Non-responsive design
  • Missing localStorage persistence
  • Incorrect drag drop functionality
  • No reminder notifications
  • Overlooking theme toggle or system preferences

CAVEATS

Missing context
  • Output format (e.g., single HTML file with embedded CSS/JS or separate files).
  • Target browser compatibility or polyfills needed.
  • Accessibility requirements (e.g., ARIA labels, keyboard navigation).
  • Exact priority colors or category definitions.
Ambiguities
  • Unclear what specific 'task categorization' options are (e.g., predefined categories like work/personal or user-defined).
  • 'Reminder notifications' implementation ambiguous (e.g., browser Notification API, in-app alerts, or email).
  • 'Appropriate breakpoints' for responsiveness not defined.
  • 'Modern, clean UI' and 'subtle micro-interactions' are subjective without examples.

QUALITY

OVERALL
0.75
CLARITY
0.90
SPECIFICITY
0.85
REUSABILITY
0.30
COMPLETENESS
0.80

IMPROVEMENT SUGGESTIONS

  • Specify output as 'Provide a single, self-contained HTML file with embedded CSS and JS.'
  • Define categories explicitly: 'e.g., Work, Personal, Shopping with distinct colors.'
  • Clarify reminders: 'Implement browser notifications using Notification API for overdue tasks.'
  • Add 'Ensure WCAG 2.1 AA accessibility compliance.'
  • Include placeholders for customization like category names to improve reusability.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER