An aesthetic Pomodoro timer that can be set to various intervals for deep, focused work and increased productivity.

Live Demo

• Utilize glassmorphism.
• The timer must have a modifiable focus interval and rest interval.
• The background should be a smooth, aesthetic gradient.
• The app must be fully-responsive down to 320 px of viewport width.

• Use Figma to wireframe the design.
• Use React with vanilla JS.
• Use Vite to create the app boilerplate.
• Deploy on Vercel.

• Wrapper div for the clock as a whole for easy re-sizing.
• Container div for clock screen.

• Glassmorphism patterns and fundamentals.
• Using near-black instead of black and near-white instead of white for a better UI experience.
• 'Scale' is a flexbox property.🤦‍♂️
• Using vmin instead of vw or vh.
• Prevented break and session length values from dropping below 0 using 'Math.max'
• Using Conventional Commits
• Inline CSS in React does not include the dash. So background-color would be backgroundColor. Styling React Using CSS
• Playing audio files using the '.play()' function.
• Utilizing useEffect hook in this context to get change timer from session to break.
• Utlizing the setTimeout function to delay an action.

• Use the approach linked in context instead to run the timer as it is far simpler. The current approach is meant for earlier versions of React.
• Combine the play and pause buttons.