FocusFlow Pomodoro App

initial state
fully flexible
name changing, settings management, and report viewing

Inspiration

As students, we often struggle with staying focused and maintaining a healthy work-break rhythm. The Pomodoro technique is a powerful productivity method, but many tools online are either complex or overloaded with features. I wanted to build a minimalist timer app using pure HTML, CSS, and JavaScript for this beginner-friendly hackathon—something simple, clean, and motivating.

What it does

Three Modes: Pomodoro, Short Break, Long Break
Countdown timer with start and reset
Progress bar that fills up during the session
Motivational quote shown after each finished session
Theme color selection (red, blue, green)
Settings modal to customize minutes
Simple report showing number of Pomodoros completed
Login (save your name in LocalStorage and show it in navbar)

How we built it

This entire project was built using only HTML, CSS, and vanilla JavaScript—following the rules of the hackathon. The timer logic was implemented using setInterval, and the DOM is updated in real-time for the countdown clock, progress bar, and quote. CSS was used for all styling including gradients, buttons, and responsive layout without any frameworks. Modals were fully created with vanilla JavaScript and controlled through class toggles.

Challenges we ran into

Making the layout responsive on both mobile and large screens without any CSS frameworks
Syncing the progress bar percentage with the time calculation in pure JavaScript
Resetting timer logic correctly when switching modes
Keeping the UI clean while adding more features like quotes, modals and settings