Pomodoro Timer App in JavaScript: Complete Web Application
Description
Description
This prompt guides you through creating a comprehensive Pomodoro timer web application using HTML5, CSS3, and JavaScript. Perfect for developers looking to build a practical productivity tool.
Who It's For
- Developers learning JavaScript who want to build a real-world project
- Freelancers and students seeking effective time management tools
- Teams implementing Pomodoro methodology in their workflow
Key Features
Animated Interface: large circular progress indicator visually displaying the current session.
Flexible Settings: customizable work intervals (25 min), short breaks (5 min), and long breaks (15 min).
Task Integration: users can associate Pomodoro sessions with specific tasks.
Productivity Statistics: detailed daily/weekly productivity tracking with visual charts.
PWA Support: installable app with offline mode and notifications.
>_ 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.