Coding a Pomodoro Timer - Part 1

• Coding
• HTML
• CSS
• Javascript

July 14, 2023

I'm currently working on a web app (check out my Creating a Web App blogposts for more on that topic). One of the functions of the app will be a focus timer otherwise known as "Pomodoro Timer". The Pomodoro Technique is a time management method that involves breaking work into focused intervals, typically 25 minutes in length, called "Pomodoros." After each Pomodoro, a short break of around 5 minutes is taken. After completing a set of Pomodoros you take a longer break of about 15-30 minutes. The technique aims to improve productivity and concentration by working in short, focused bursts and providing regular breaks for rest, recharge and combat the urge to engage in unproductive distractions, helping to overcome the temptation to procrastinate.

So let's get started with the frontend, which is what the user sees and can interact with. First I'm writing the markup in HTML:

The first <div> element defines the container for the timer. The <svg> element defines the SVG area where the timer is displayed. The <g> element groups the elements within the SVG. The <circle> element represents the elapsed part of the timer progress. The "cx" and "cy" attributes set the coordinates of the circle's center, and "r" defines the radius of the circle. The <path> element represents the remaining part of the timer progress. The ID "base-timer-path-remaining" is used to identify the element. I will later use it in Javascript when I'm defining the functionality of the timer. The "d" attribute defines the shape of the path that represents the progress. The "stroke-dasharray" attribute sets the length of the visible and invisible parts of the path. The <span> element contains the text for the displayed time. The ID "base-timer-indicator“ is used to identify the element. I will also need it later in Javascript.

With this next code I'm creating the different buttons I'm gonna need for interactions:

In the <div> element „timer-buttons“ I have added a „start“, „pause“ and „reset“ button. All of them have an ID since I'll need them in the Javascript code to give them functions. For the „pause“ and „reset“-buttons I'm using SVGs instead of text.

Finally I'm also adding a "settings" section where the user will be able to change the duration of the timer and the pause lengths. I'm using "minus" and "plus" buttons to modify the numbers, so I'm assigning them IDs to enable functionality with Javascript.

That's it for the HTML part. Next I will write the CSS to give it some nice styling and then comes the fun part with Javascript to make the timer actually work.