![](../images/blog/coding-a-pomodoro-timer-part-1.jpg)
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:
![HTML markup for a pomodoro timer](/images/blog/code/timer-code-snippets/timer-html.png)
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:
![HTML markup for a pomodoro timer buttons](/images/blog/code/timer-code-snippets/timer-buttons-html.png)
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.
![HTML markup for a pomodoro timer settings](/images/blog/code/timer-code-snippets/timer-settings-html.png)
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.