Pomodoro clocks are often used by people who want to ensure they get small breaks in-between work sessions. The look of the app should not contribute to the stress of work. The design must be calming, visually appealing, and simple to use. I put a lot of thought into the colour palette and spent time learning about colour theory and the moods different colour combinations create. I chose calming but happy colours. I also selected audio files that were calming.

I thought it'd be nice to have a visual element on the page that would indicate the progress of time other than the numeric countdown timer. This is why I animated an SVG clock so that the hand goes around in proportion to the countdown clock. I coded a function that calculates the ratio of the work time to break time and displays the ratio on the back of the clock. The background of the clock is separated into two colours (green and yellow) based on the set break time, and the work time. One cycle around the clock is one complete "pomodoro session" (one work and one break session).

There are several ways this app can be improved. Currently, the SVG animation pauses when the tab is not in focus. In order for the clock animation to be in proportion to the countdown timer, the animation must continue even when the tab is out of focus. All of the settings buttons should be disabled when the clock is running. Currently only the apply and default setting buttons are disabled.