🛠 What I Made
I built a 25 + 5 Clock – a simple but functional Pomodoro Timer app!
It allows users to:
Set custom session and break lengths.
Start, pause, and reset the timer.
Automatically switch between session and break modes.
Play a sound when switching.
This project is styled with basic CSS to keep the interface clean and easy to use.
🧩 How I Made It
HTML: Structured the layout, including sections for session/break controls, the timer, and start/reset buttons.
CSS: Designed a minimal, centered, user-friendly interface with clean buttons and layout.
JavaScript:
Managed timer logic using setInterval and clearInterval.
Handled increment/decrement for session and break lengths.
Implemented start, pause, reset, and mode switching between session and break.
Played an audio beep when the timer hit zero.
Updated the display dynamically as the timer counts down or when settings are adjusted.
✨ What I Learned
Timer logic: Handling countdowns with proper state management (timerRunning, currentMode, etc.).
Event handling: Listening to button clicks for changing timer lengths and controlling the timer.
DOM manipulation: Dynamically updating the display with real-time values.
Audio control: Using JavaScript to play and reset audio elements properly.
User experience (UX): Keeping buttons disabled at the right time and ensuring smooth session/break transitions.
Coding discipline: Managing multiple moving parts like timers, sound, and UI updates cleanly in a simple project.
🌟 Final Thoughts
This project gave me hands-on experience with real-world JavaScript problems like state handling, timing, and dynamic DOM updates — and it felt great seeing it all come together into a polished mini app!