Work in regular work/break intervals. Start timer within Trello, Asana, Jira, Todoist, etc. Track from text. Select any text and start timer for it from right-click menu. Default project. Start the timer with a project already selected. Remove time you've been inactive or away from computer. Encouraged by the challenge, he found a tomato (pomodoro in Italian) shaped kitchen timer, and the Pomodoro technique was born. Though Cirillo went on to write a 130-page book about the method, its biggest strength is its simplicity: Get a to-do list and a timer. Set your timer for 25 minutes, and focus on a single task until the timer rings. Demo video about Pomodoro Timer Google Chrome App. Pomodoro is a technique used to manage time and improve productivity.
- Marinara Pomodoro Timer
- Best Pomodoro Timer Chrome
- Pomodoro Timer Chrome
- Pomodoro Timer Pro Chrome
- Pomodoro Timer Chrome Extension
If you’ve ever struggled to stay focused and productive then there’s a good chance you’ll have heard about the ‘Pomodoro Technique’ at some point.
Pomodoro is a time management technique that is deliciously simple to learn: you segment the time you spend working into 25 minute spurts, each separated by a short breaks of around 5 minutes or so.
After four bouts, i.e., 100 minutes of work, you then take a longer break of 15 or 20 minutes.
You can find a great cheat sheet with more information on Scribd.
The method has won an army of devotees around the world who attest to its success in helping to keep the mind fresh and focused. With timing being key to the experience, timer applications come in handy.
Pomodoro App For Chrome
TimeDoser is a simple timer application for Chrome and Chrome OS built around a similar concept.
The app runs on the desktop where it sits flush with the left-hand side of the screen. It can be repositioned and made to float above your other windows.
Clicking on the ‘!’ icon begins a 25 minute countdown (time increments can be toggled in the settings view) and turn the box red.
Clicking on the timer countdown will ‘pause’ it, while a cancel option, a square box, is tucked inside the options drawer/expand handle.
When the countdown reaches zero the app delivers a small desktop notification and plays a short alert trill. It’s a good job neither of these are easily missed as it slips straight into the allotted segue of distraction.
Breaks can be skipped and stacked up by clicking on the arrow icon in the expandable drawer (click the ‘>’ icon on the right-hand side of the app to open it) during a ‘green’ break session.
TimeDoser Features
- 25, 30, 35 and 40 minute time increments
- 5, 10 and 15 minute break periods
- Can be ‘pinned’ above other windows
- ‘Sticks’ to left-hand side of screen
- Chrome notifications and alert sound
If there are drawbacks to be found in such a fantastically simple app it is only that the window can’t be positioned freely on the screen, and that there’s no way to view some basic stats on the number of completed sessions, accumulated breaks, etc.
Install TimeDoser in Chrome
TimeDoser is a free app for Google Chrome and Chrome OS and requires no special permissions to run.
A Pomodoro timer is a simple application that keeps you focused and productiveby scheduling work and break sessions consecutively. Traditionally, you have25-minute focus sessions followed by five-minute breaks and a longer 15-minutebreak after four consecutive focus sessions.
The Pomodoro timer we’ll be building in this tutorial implements the Pomodorotechnique perfectly and tells you exactly when to work and when to take a shortbreak. The basic process is as follows:
- Start a 25-minute timer.
- Work until the timer rings.
- Take a short, five minutes break.
- Every four pomodoros, take a longer break (15 minutes).
You can find a live demo of the completed applicationhere.
Prerequisites
You need to have a basic knowledge of HTML, CSS andJavaScript under your belt. Additionally, you need to haveGit,Node.js andnpm installed on your computer.
Getting started
Grab the starter files for this tutorial onGitHub. Itincludes all the markup and styles for the application we’ll be building. Youcan download the zipfileand extract it on your computer, or run the command below in your terminal toclone the repository to your filesystem.
Once the repository is downloaded,
cd
into it in your terminal:Next, run the following command to install the
browser-sync
dependency whichis used to automatically refresh the browser once a file is changed.Finally, start the app on http://localhost:3000 using the following command:
At this point, this is what you should see in your browser:
Update the timer
The interface of the application is quite simple. At the top of the page is aprogress bar, and following that you have three buttons denoting the three modesof the application. Next, we have the countdown timer and a start buttonimmediately after.
A traditional pomodoro session is 25 minutes, and a short break lasts for fiveminutes. A long break (15 minutes) is activated after four consecutive pomodorosessions. Let’s turn this information into code by creating a
timer
variablewith the following properties:The next thing we need to do is update the countdown with the appropriate amountof minutes and seconds once any of the three buttons above it is clicked. To dothis we need to create an event listener that detects a click on the buttons anda function to switch the mode of the timer appropriately.
Add the following lines of code just below the
timer
object in your main.js
file:Here, we use event delegation to detect a click on any of the mode buttons. The
modeButtons
variable points to the containing element and once a click isdetected on the element, the handleMode()
function is invoked.Within the
handleMode()
function, the value of the data-mode
attribute isretrieved from the target element. If this attribute does not exist, it meansthat the target element was not one of the buttons and the function exits.Otherwise, a switchMode()
function is invoked with the value of thedata-mode
attribute as its only argument.Go ahead and create the
switchMode()
function just above handleMode()
asshown below:The
switchMode()
function above adds two new properties to the timer
object.First, a mode
property is set to the current mode which could be pomodoro
,shortBreak
or longBreak
. Next, a remainingTime
property is set on thetimer. This is an object which contains three properties of its own:total
is the total number of seconds remaining. This is set to the number ofminutes of the current mode multiplied by 60. For example, ifmode
isshortBreak
,total
will be set to 300 (the result of 5 ⨉ 60).minutes
is the number of minutes for the mode. For example, a pomodorosession is 25 minutes.seconds
is always set to zero at the start of a session.
Following that, the
active
class is removed from all the mode buttons and seton the one that was clicked, and the background colour of the page is updated.The use of CSScustompropertiesmakes this sort of operation a lot easier.After all that, an
updateClock()
function is invoked. This function is how thecountdown portion of the application is updated. Add it just above theswitchMode()
function as shown below:The
updateClock()
function extracts the value of the minutes
and seconds
properties on the remainingTime
object and pads them with zeros wherenecessary so that the number always has a width of two. For example, 8
secondswill become 08
seconds, but 12
minutes will be left as 12
minutes.Next, the countdown timer is updated by changing the text content of therelevant elements. At this point, the app should work similarly to the GIF below.
Take a breather and see the complete code at the end of this step.Start the timer
The next step is to add the ability to start the timer and countdown to zero.Declare an
interval
variable below timer
:This variable will be assigned to an instance of the
setInterval()
method in anew startTimer()
function which should be added just above updateClock()
:Before we can start the timer, we need to get the exact time in the future whenthe timer will end. This is achieved by retrieving the timestamp of the currentmoment (
Date.parse(new Date())
) which is in milliseconds and adding the totalnumber of milliseconds in the session to it. For reference, 1 second = 1000ms.This value is then stored in the endTime
variable.The
interval
variable is set to the setInterval()
method which executes thecallback function every 1000 milliseconds (1 second). This callback functionreferences a getRemainingTime()
function which should be created abovestartTimer
as follows:The function above takes a timestamp argument and finds the difference betweenthe current time and the end time in milliseconds. This value is stored in the
difference
variable and used to compute the total number of seconds left bydividing by 1000. The result is subsequently converted to an integer in base 10through the Number.parseInt()
method and stored in the total
variable.The
minutes
variable contains the number of whole minutes left (if any) andseconds
is the number of seconds left after whole minutes have been accountedfor. For example, if total
is 230 seconds, minutes
will equal 3 and seconds
will be 50.Finally, an object containing the values of
total
, minutes
, and seconds
isreturned from the function. This corresponds to the structure of thetimer.remainingTime
object seen earlier.Back to the
startTimer()
function, we can see that the return value ofgetRemainingTime()
is stored in the timer.remainingTime
property. Next,updateClock()
is invoked which updates the countdown to the latest value.Following that, the updated value of the
total
property intimer.remainingTime
is extracted and checked to see if it is less than orequal to zero. If so, the clearInterval()
method is called with the interval
variable as its only argument and this causes setInterval()
to be cancelledand the countdown ends.Let’s call the
startTimer()
function once the start button is clicked. Add thefollowing code just above the modeButtons
variable:Once the main button is clicked, the value of the
data-action
attribute onthe button is stored in an action
variable and checked to see if it’s equal to“start”. If so, the startTimer()
function is invoked and the countdown begins.We need to make a small modification to
startTimer()
so that the button textchanges to “stop” and the button becomes depressed like a hardware button.Now, once the countdown timer starts, the value of the button’s
data-action
attribute and its text content is changed to “stop”. Also, the active
class isadded to the button causing it to become depressed.A final thing to do in this section is to ensure that the
mode
and remainingTime
properties are set on the timer
object on page load. To do so, we can executethe switchMode()
property once the DOMContentLoaded
event is fired.This ensures that the default mode for the timer is
pomodoro
and the contentsof timer.remainingTime
is set to the appropriate values for a pomodorosession. If the above snippet is not present, the program will crash with aTypeError
if startTimer()
is invoked because timer.remainingTime
will not exist and we’re trying to access the value of the total
property inthat object on the first line of the function.At this point, you can test the app by setting the
Take a breather and see the complete code at the end of this step.timer.pomodoro
property to1
temporarily and then click the start button to start the countdown to zero.Remember to return it to 25
before moving on to the next section.Stop the timer
The next step is to stop the timer when the stop button is clicked. This buttonis the same one used to start the timer. It’s the value of the
data-action
attribute on the button that allows us to determine whether to start or stop thetimer.Add a new
stopTimer()
function below startTimer()
as shown below:In this function, the
clearInterval()
method is invoked, causing thesetInterval()
method triggered in startTimer()
to be cancelled so that thecountdown is paused. Next, the value of the button’s data-action
attribute and its text content is changed to “start” and it is returned to itsoriginal form by removing the active
class.Marinara Pomodoro Timer
To execute
stopTimer()
when data-action
is set to “stop”, modify themainButton
event listener as shown below:Finally, we also need to stop the timer when the mode is changed by clicking anyof the three buttons above the countdown:
Take a breather and see the complete code at the end of this step.Automatically start the next session
The timer needs to automatically begin a break session at the end of a pomodorosession and vice versa. Additionally, a long break should be triggered afterfour consecutive pomodoro sessions. This is what we’ll tackle in this section.
First, add a new
sessions
property to the timer
object as shown below. Thisis how we’ll keep track of the number of pomodoro sessions that have beencompleted.Next, modify the
startTimer()
function so that the sessions
property isincremented at the start of a pomodoro session:The highlighted line above checks if the current mode is
pomodoro
andincrements the timer.sessions
property by 1.The next step is to auto switch to the next session on completion of the currentone. This also involves a modification to the
startTimer()
function:Once the countdown reaches zero, the
switch
statement present above causes theapp to switch to a new break session or pomodoro session depending on the valueof timer.mode
.In the first case, an
if
statement checks if timer.sessions
is divisible bytimer.longBreakInterval
without a remainder and switches to long break mode ifso. Otherwise, a short break session is triggered. The default
case isexecuted if a break session is ending which causes a new pomodoro session tobegin.Finally,
startTimer()
is executed again causing the countdown to start againas before. If you didn’t know already, it’s possible to execute a function fromwithin itself we’ve just done.To test this out, you can set the value of the
Take a breather and see the complete code at the end of this step.pomodoro
, shortBreak
andlongBreak
properties of the timer
object to 1 temporarily, and observe howeach session leads to the next.Update the progress bar
In this section, we’ll update the progress bar so that it reflects the progressof each countdown. The progress bar is aptly represented by the
<progress>
element which needs a max
and a value
attribute.By default, the
value
attribute is set to zero indicating that no progress hasbeen made but the max
attribute is left out. This attribute is essential todetermine what represents 100% completion of a task and it must be greater thanzero.We can set the
max
attribute on the <progress>
element in switchMode()
asshown below. It’s set to the total amount of seconds in the countdown.Next, change your
updateClock()
function as follows:Each time
Take a breather and see the complete code at the end of this step.updateClock()
is invoked, the value
attribute of the <progress>
element is updated to the result of the remaining amount of seconds subtractedfrom the total number of seconds in the session and this causes the progress barto update accordingly.Reflect the countdown in the page title
For practical reasons, it is beneficial for the countdown and status of thetimer to be reflected in the page title. This allows the user to quickly see howmany minutes are left in a session without switching tabs.
Best Pomodoro Timer Chrome
Modify your
updateClock()
function as follows:Passwords 1 600. Changing the title of the page is as simple as updating the value of the
Take a breather and see the complete code at the end of this step.document.title
property to the desired string. The ternary operator is used tomodify the title depending on if the current mode is set to pomodoro or not.Play sounds
Pomodoro Timer Chrome
Let’s add some interest to our pomodoro app by playing sounds on certain events.First, we’ll play a sound if the timer is started or stopped and also whentransitioning from a pomodoro to a break session (or vice versa).
We’ll tackle the case of starting and stopping the timer first. The relevantaudio file in the project folder is
button-sound.mp3
. All we need to do iscreate a new audio object using this file, and play the sound each timemainButton
is clicked. Here’s how:Let’s continue by playing a sound on the transition from one session to another.In the
index.html
file, we have three audio elements which have a data-sound
attribute corresponding to the three modes available. All we need to do isselect the appropriate one and play it during the transition.Add the following line below the
switch
block in the startTimer()
function:And that’s all we need to do here. Once a pomodoro session ends and a breaksession begins, a ringing sound is heard. On the other hand, a “Get back towork” message is played when transitioning to a pomodoro session.
Take a breather and see the complete code at the end of this step.Display notifications
Notifications are another way we can draw a user’s attention when transitioningbetween sessions. Before we can display a notification to the user, we need toask for permission first. We’ll do this when the page loads. If the request isgranted, we can proceed to display notifications otherwise, we won’t be able to.
Pomodoro Timer Pro Chrome
Modify the document event listener as shown below:
This code will display a notice in your browser asking you to grantnotifications permission to the webpage. Ensure to grant this permission beforeproceeding. Once granted, a test notification will be displayed.
Pomodoro Timer Chrome Extension
Next, add the following lines below the
switch
block in startTimer
todisplay a notification when transitioning to a new session:The above snippet ensures that a new notification is displayed when a newsession begins. As demonstrated earlier, the ternary operator is used to set thetext in the notification based on the current state of the timer.
Take a breather and see the complete code at the end of this step.Conclusion
You’ve reached the end of this tutorial. At this point, you should have afunctioning Pomodoro timer application with useful features like sound alertsand notifications. If you have any questions or suggestions, please leave acomment below.
Thanks for reading, and happy coding!