Pomodoro countdown timer synced to the clock

Question 1

This countdown timer is supposed to:

be synced to the user's clock
at every hour and half hour, will start a 25 minute countdown followed by a 5 minute break

The code works but I question its efficiency.

function startTime() {
 var today = new Date();
 var minutes = today.getMinutes();
 var seconds = today.getSeconds();
 //makes the clock count DOWN instead of up
 if (minutes<25 && seconds<60) {
 document.getElementById("message").innerHTML = "WORK TIME";
 minutes=24-minutes;
 seconds=60-seconds;
 } else if (minutes<30 && seconds<60){
 document.getElementById("message").innerHTML = "BREAK TIME";
 minutes=29-minutes;
 seconds=60-seconds;
 } else if (minutes<55 && seconds<60){
 document.getElementById("message").innerHTML = "WORK TIME";
 minutes=54-minutes;
 seconds=60-seconds;
 } else {
 document.getElementById("message").innerHTML = "BREAK TIME";
 minutes=59-minutes;
 seconds=60-seconds;
 }
 //to make clock show correct format, e.g., 2:59 instead of 03:60
 if (seconds == 60){
 seconds=0;
 minutes=minutes+1;
 }
 document.getElementById('txt').innerHTML=
 minutes+" min and "+seconds+" sec remaining";
}
setInterval(startTime, 1000);

<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body onload="startTime()">
<h1 id="message"><h1>
<div id="txt"></div>
</body>
</html>

Question 2

Bug

There is an off chance that the interval event that you start at the bottom of the script with setInterval(startTime, 1000); will fire before the page has fully loaded, causing the first run to throw an error at document.getElementById("message").innerHTML =

However it is a minor bug and will fix itself in the next interval.

Some coding points

Avoid putting code in the HTML. eg you have <body onload="startTime()"> which can be done in the script with addEventListener("load",startTime) But its not really needed as you have the interval call the function anyway.
You can access elements directly via their id as long as you ensure that the id is unique on the page. If you use the same name for any other id or name element property then it will not work. Refer to answers to this SO post for more context.
When adding text only (no HTML) to an element it is more efficient to add it via the textContent property. For simple stuff it's not a major issue, it is when you start to add lots of content that it will be noticeable.

Regarding time

The value of a Date object is an integer that counts the milliseconds since 1 January 1970 UTC.

Since you are not interested in the specific time, but rather half hour periods it can be simpler to work in milliseconds rather than the more complex minutes, seconds format.

To get the millisecond value you can use Date.now() and to change that value to half hour chunks you get the remainder of dividing by 30 * 60 * 1000ms using the remainder operator %

The remainder operator % is great when you need to get cyclic values.

Example snippet

The example below show how it can be done using milliseconds alone.

addEventListener("load", displayPeriod); // start on page load
const second = 1000; // length of second in ms
const minute = 60 * second; // length of minute in ms
const halfHour = 30 * minute; // length of half hour in ms
function displayPeriod() {
 const halfHourTime = Date.now() % halfHour;
 var nextPeriod = 25 * minute;
 if (halfHourTime <= nextPeriod) {
 message.textContent = "WORK TIME";
 } else {
 message.textContent = "BREAK TIME";
 nextPeriod = halfHour;
 }
 const min = Math.floor((nextPeriod - halfHourTime) / minute);
 const sec = Math.floor((nextPeriod - halfHourTime) / second) % 60;
 
 countDown.textContent = min + ":" + ("" + sec).padStart(2,"0");
 var time2Second = second - halfHourTime % second;
 if (time2Second < 50) { // if too close delay a littl
 time2Second += 50;
 }
 setTimeout(displayPeriod, time2Second);
}

div{
 font-family : arial;
 font-size : 32px;
 width : 100%;
 text-align : center;
}

<div id="message"></div>
<div id="countDown"></div>

Or using interval and shortening the naming as I find long names hard on the eyes. Also I use a shortcut for Math.floor the bitwise | 0 which is handy for rounding down positive numbers. I also used the ms times expressed with the exponent as I happen to know them (3e5 is 5 minutes in milliseconds)

I would consider the second snippet of lower quality, but for simple projects less code can be better.

addEventListener("load", () => setInterval(displayPeriod,1000)); // start on page load
function displayPeriod() {
 const time= Date.now() % 18e5;
 var nextP = 15e5;
 var mes = "WORK TIME :(";
 if (time > nextP) {
 mes = "BREAK TIME :)";
 nextP = 18e5;
 }
 const m = (nextP - time) / 6e4 | 0;
 const s = ("" + ((nextP - time) / 1e3 | 0) % 60).padStart(2,"0");
 message.textContent = mes;
 countDown.textContent = m + ":" + s;
}

div{
 font-family : arial;
 font-size : 32px;
 width : 100%;
 text-align : center;
}

<div id="message"></div>
<div id="countDown"></div>

`setInterval` V `setTimeout`

Personally I prefer using setTimeout rather than the setInterval as it give finer control over when the next event will fire. In the example I use the ms time to workout how long it is till the next second starts, if too close to ensure the timer will fire (browsers may throttle timers) I offset it a little.

This method sets the event for the closest coming second, and will skip any missed seconds.

But setInterval is just as good but if the system is busy the countdown can skip displaying seconds more often than using setTimeout

Question 3

Gosh, thanks so much for the thorough feedback. I'll need to study these pointers slowly one by one (this is my first program and I'm so very green.) Thank you again. Dang, you even formatted it to look better. And I like the addition of the emoticons. :) Thank you again for taking the time to correct my code.

Question 4

You forgot to replace 1000 with 1e3, as I'm sure you also know that number by heart. ;) That being said, I'd prefer to use const secondsOfHalfHour = Date.now() / (60 * 1000) % 30, to get rid of all the obscure numbers.

Blindman67 Blindman67 22.8k2 gold badges16 silver badges40 bronze badges · Answer 1 · 2018-10-21 01:17:45Z

Bug

There is an off chance that the interval event that you start at the bottom of the script with setInterval(startTime, 1000); will fire before the page has fully loaded, causing the first run to throw an error at document.getElementById("message").innerHTML =

However it is a minor bug and will fix itself in the next interval.

Some coding points

Avoid putting code in the HTML. eg you have <body onload="startTime()"> which can be done in the script with addEventListener("load",startTime) But its not really needed as you have the interval call the function anyway.
You can access elements directly via their id as long as you ensure that the id is unique on the page. If you use the same name for any other id or name element property then it will not work. Refer to answers to this SO post for more context.
When adding text only (no HTML) to an element it is more efficient to add it via the textContent property. For simple stuff it's not a major issue, it is when you start to add lots of content that it will be noticeable.

Regarding time

The value of a Date object is an integer that counts the milliseconds since 1 January 1970 UTC.

Since you are not interested in the specific time, but rather half hour periods it can be simpler to work in milliseconds rather than the more complex minutes, seconds format.

To get the millisecond value you can use Date.now() and to change that value to half hour chunks you get the remainder of dividing by 30 * 60 * 1000ms using the remainder operator %

The remainder operator % is great when you need to get cyclic values.

Example snippet

The example below show how it can be done using milliseconds alone.

addEventListener("load", displayPeriod); // start on page load
const second = 1000; // length of second in ms
const minute = 60 * second; // length of minute in ms
const halfHour = 30 * minute; // length of half hour in ms
function displayPeriod() {
 const halfHourTime = Date.now() % halfHour;
 var nextPeriod = 25 * minute;
 if (halfHourTime <= nextPeriod) {
 message.textContent = "WORK TIME";
 } else {
 message.textContent = "BREAK TIME";
 nextPeriod = halfHour;
 }
 const min = Math.floor((nextPeriod - halfHourTime) / minute);
 const sec = Math.floor((nextPeriod - halfHourTime) / second) % 60;
 
 countDown.textContent = min + ":" + ("" + sec).padStart(2,"0");
 var time2Second = second - halfHourTime % second;
 if (time2Second < 50) { // if too close delay a littl
 time2Second += 50;
 }
 setTimeout(displayPeriod, time2Second);
}

div{
 font-family : arial;
 font-size : 32px;
 width : 100%;
 text-align : center;
}

<div id="message"></div>
<div id="countDown"></div>

Or using interval and shortening the naming as I find long names hard on the eyes. Also I use a shortcut for Math.floor the bitwise | 0 which is handy for rounding down positive numbers. I also used the ms times expressed with the exponent as I happen to know them (3e5 is 5 minutes in milliseconds)

I would consider the second snippet of lower quality, but for simple projects less code can be better.

addEventListener("load", () => setInterval(displayPeriod,1000)); // start on page load
function displayPeriod() {
 const time= Date.now() % 18e5;
 var nextP = 15e5;
 var mes = "WORK TIME :(";
 if (time > nextP) {
 mes = "BREAK TIME :)";
 nextP = 18e5;
 }
 const m = (nextP - time) / 6e4 | 0;
 const s = ("" + ((nextP - time) / 1e3 | 0) % 60).padStart(2,"0");
 message.textContent = mes;
 countDown.textContent = m + ":" + s;
}

div{
 font-family : arial;
 font-size : 32px;
 width : 100%;
 text-align : center;
}

<div id="message"></div>
<div id="countDown"></div>

`setInterval` V `setTimeout`

Personally I prefer using setTimeout rather than the setInterval as it give finer control over when the next event will fire. In the example I use the ms time to workout how long it is till the next second starts, if too close to ensure the timer will fire (browsers may throttle timers) I offset it a little.

This method sets the event for the closest coming second, and will skip any missed seconds.

But setInterval is just as good but if the system is busy the countdown can skip displaying seconds more often than using setTimeout

Gosh, thanks so much for the thorough feedback. I'll need to study these pointers slowly one by one (this is my first program and I'm so very green.) Thank you again. Dang, you even formatted it to look better. And I like the addition of the emoticons. :) Thank you again for taking the time to correct my code.
You forgot to replace 1000 with 1e3, as I'm sure you also know that number by heart. ;) That being said, I'd prefer to use const secondsOfHalfHour = Date.now() / (60 * 1000) % 30, to get rid of all the obscure numbers.

Stack Exchange Network

Pomodoro countdown timer synced to the clock

1 Answer 1

Bug

Some coding points

Regarding time

Example snippet

`setInterval` V `setTimeout`

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Pomodoro countdown timer synced to the clock

1 Answer 1

Bug

Some coding points

Regarding time

Example snippet

setInterval V setTimeout

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions

`setInterval` V `setTimeout`