Skip to main content
Prompts Comprehensive HTML5 Pomodoro Timer PWA App

developer coding template risk: low

Comprehensive HTML5 Pomodoro Timer PWA App

Create a comprehensive Pomodoro timer app using HTML5, CSS3, and JavaScript with an elegant animated circular progress indicator, customizable work/break intervals, task list integ…

PROMPT 

Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default ${Work Intervals:25min}), short breaks (default ${Short Breaks:5min}), and long breaks (default ${Long Breaks:15min}). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Create comprehensive pomodoro timer app using HTML5 CSS3 JavaScript
  • Design elegant interface with animated circular progress indicator
  • Allow customization of work short long breaks
  • Include task list integration
  • Add sound notifications with volume control
  • Implement statistics tracking with visual charts
  • Use localStorage for persistence
  • Make app installable as PWA with offline support notifications
  • Add keyboard shortcuts
  • Include multiple theme options
  • Add focus mode

FAILURE MODES

  • May omit some features like PWA or focus mode
  • Might not implement full offline support
  • Could fail to persist all data in localStorage
  • Charts may lack detail or visualization
  • Sound notifications might lack volume control
  • Task integration may be incomplete

CAVEATS

Missing context
  • Output format (e.g., single HTML file, separate files, GitHub repo).
  • Libraries for charts (e.g., Chart.js), animations (e.g., SVG/Canvas), sounds (e.g., assets or APIs).
  • Sound notification assets or sources.
  • PWA specifics (manifest details, service worker scope).
  • Target browsers/devices for compatibility.
Ambiguities
  • Malformed placeholders like '${Work Intervals:25min}' unclear if variables or literals.
  • 'Elegant interface' and 'large, animated circular progress indicator' lack precise design specs.
  • 'Visual charts' unspecified type or library.
  • 'Blocks distractions' in focus mode ambiguous on implementation (e.g., fullscreen, overlays).

QUALITY

OVERALL
0.70
CLARITY
0.85
SPECIFICITY
0.75
REUSABILITY
0.30
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Replace malformed placeholders with clean template vars, e.g., 'default {workMinutes:25}'.
  • Specify output as 'a single self-contained HTML file with inline CSS/JS'.
  • Add 'Use Chart.js for statistics charts' and 'Provide base64-encoded sound files'.
  • Clarify focus mode: 'Enter fullscreen and hide non-essential UI elements'.
  • Define success criteria: 'App must work offline, pass Lighthouse PWA audit >90%'.

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