This is a Timer application built using React. The app allows users to focus on their work for a set period, followed by a short break. It tracks the time using a circular progress bar and offers play, pause, and settings functionality. The timer switches automatically between work and break modes and can be customized based on user preferences.
- Work and Break Modes: The app alternates between work and break modes, helping users follow the Pomodoro technique (e.g., 45-minute work session, followed by a 5-minute break).
- Circular Progress Bar: The time remaining is displayed on a circular progress bar that dynamically updates as the timer counts down.
- Play/Pause Controls: Users can start or pause the timer at any time with the play/pause button.
- Automatic Mode Switch: The app automatically switches between work and break modes once the time is up.
- Customizable Time Intervals: Users can customize the duration of the work and break periods via settings.
- Persistent State: The timer maintains the current session’s state and resets properly when the mode switches.
React, JavaScript (ES6+), HTML, CSS, Circular Progress Bar Library
- Start the Timer: Click the "Play" button to start the Pomodoro timer. The timer will begin counting down the work period.
- Pause the Timer: Click the "Pause" button to pause the current session. You can resume it later by clicking "Play" again.
- Switch Between Modes: When the work timer ends, the app will automatically switch to break mode, and vice versa.
- Adjust Settings: To customize the work and break durations, click the "Settings" button to open the settings menu.
This Focus Timer app was created as part of a personal project to help improve productivity using the Pomodoro Technique. The design inspiration comes from various online resources and productivity apps.