Skip to main content
Prompts HTML5 Mindfulness Meditation Timer Builder

developer coding user risk: low

HTML5 Mindfulness Meditation Timer Builder

Build a mindfulness meditation timer using HTML5, CSS3, and JavaScript with a serene, nature-inspired interface. Implement customizable sessions, ambient sounds, guided meditation,…

PROMPT 

Build a mindfulness meditation timer using HTML5, CSS3, and JavaScript. Create a serene, distraction-free interface with nature-inspired design. Implement customizable meditation sessions with preparation, meditation, and rest intervals. Add ambient sound options including nature sounds, binaural beats, and white noise. Include guided meditation with customizable voice prompts. Implement interval bells with volume control and sound selection. Add session history and statistics tracking. Create visual breathing guides with animations. Support offline usage as a PWA. Include dark mode and multiple themes. Add session scheduling with reminders.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Build mindfulness meditation timer using HTML5 CSS3 JavaScript
  • Create serene distraction-free nature-inspired interface
  • Implement customizable sessions with preparation meditation rest intervals
  • Add ambient sounds nature binaural beats white noise
  • Include guided meditation with customizable voice prompts
  • Implement interval bells with volume control sound selection
  • Add session history statistics tracking
  • Create visual breathing guides with animations
  • Support offline usage as PWA
  • Include dark mode multiple themes
  • Add session scheduling with reminders

FAILURE MODES

  • May produce incomplete implementation of all features
  • May fail to properly implement complex audio features
  • May not achieve full PWA offline functionality
  • May result in non-serene or distracting UI
  • May overlook accessibility or responsiveness

CAVEATS

Missing context
  • Audio file sources or generation method for sounds.
  • UI layout or wireframe details.
  • Data storage approach for history and statistics (e.g., localStorage, IndexedDB).
  • PWA requirements like manifest.json specifics or service worker scope.
  • Target screen sizes or responsive breakpoints.
Ambiguities
  • Unclear what 'preparation, meditation, and rest intervals' entail exactly (e.g., durations, sequences).
  • 'Customizable voice prompts' ambiguous: text-to-speech, pre-recorded audio, or scripts?
  • 'Session scheduling with reminders' lacks details on mechanism (e.g., browser notifications, local storage).
  • 'Nature-inspired design' is vague without color palettes or elements specified.

QUALITY

OVERALL
0.65
CLARITY
0.85
SPECIFICITY
0.70
REUSABILITY
0.25
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • Specify output format (e.g., 'Provide complete code in a single HTML file with embedded CSS/JS' or 'Structure as a GitHub-ready project').
  • Break into prioritized phases (e.g., core timer first, then sounds, then PWA).
  • Define key data structures (e.g., session config object schema).
  • Add success criteria (e.g., 'Must work offline, track at least streaks and total time').
  • Include example customization options (e.g., default intervals: 5min prep, 10min meditate, 2min rest).

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