Pomodoro countdown timer synced to the clock Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Countdown timerPomodoro Timer via setIntervalPomodoro Timer via setTimeout()Pomodoro Timer in JavascriptPomodoro timer in GoPomodoro Timer in PythonPomodoro Countdown ClockPomodoro timer modulePomodoro Clock JS ModularisationPomodoro timer in React
Maximum summed subsequences with non-adjacent items
How to write the following sign?
Why do we bend a book to keep it straight?
Sum letters are not two different
What do you call the main part of a joke?
Is a ledger board required if the side of my house is wood?
An adverb for when you're not exaggerating
How does light 'choose' between wave and particle behaviour?
Crossing US/Canada Border for less than 24 hours
Do any jurisdictions seriously consider reclassifying social media websites as publishers?
How does Python know the values already stored in its memory?
Is CEO the "profession" with the most psychopaths?
Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?
Why is it faster to reheat something than it is to cook it?
What are the diatonic extended chords of C major?
How come Sam didn't become Lord of Horn Hill?
AppleTVs create a chatty alternate WiFi network
Denied boarding although I have proper visa and documentation. To whom should I make a complaint?
Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?
Why should I vote and accept answers?
Morning, Afternoon, Night Kanji
How fail-safe is nr as stop bytes?
How can I reduce the gap between left and right of cdot with a macro?
How to tell that you are a giant?
Pomodoro countdown timer synced to the clock
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Countdown timerPomodoro Timer via setIntervalPomodoro Timer via setTimeout()Pomodoro Timer in JavascriptPomodoro timer in GoPomodoro Timer in PythonPomodoro Countdown ClockPomodoro timer modulePomodoro Clock JS ModularisationPomodoro timer in React
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
$begingroup$
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>javascript timer
edited Nov 20 '18 at 5:02
200_success
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
$endgroup$
bumped to the homepage by Community♦ 10 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
$begingroup$
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>javascript timer
edited Nov 20 '18 at 5:02
200_success
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
$endgroup$
bumped to the homepage by Community♦ 10 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
$begingroup$
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>javascript timer
edited Nov 20 '18 at 5:02
200_success
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
$endgroup$
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>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>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>javascript timer
javascript timer
edited Nov 20 '18 at 5:02
200_success
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
edited Nov 20 '18 at 5:02
200_success
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
edited Nov 20 '18 at 5:02
200_success
131k17157422
edited Nov 20 '18 at 5:02
200_success
131k17157422
edited Nov 20 '18 at 5:02
200_success
131k17157422
131k17157422
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
asked Oct 20 '18 at 23:07
Foreel19Foreel19
161
161
bumped to the homepage by Community♦ 10 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 10 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$begingroup$
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 atdocument.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 withaddEventListener("load",startTime)But its not really needed as you have the interval call the function anyway. - You can access elements directly via their
idas long as you ensure that the id is unique on the page. If you use the same name for any otheridornameelement property then it will not work. - 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, its when you start to add lots of content that it will be noticable.
Regarding time
The value of a Date object is a 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 millisons 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 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
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
$endgroup$
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f205962%2fpomodoro-countdown-timer-synced-to-the-clock%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$begingroup$
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 atdocument.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 withaddEventListener("load",startTime)But its not really needed as you have the interval call the function anyway. - You can access elements directly via their
idas long as you ensure that the id is unique on the page. If you use the same name for any otheridornameelement property then it will not work. - 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, its when you start to add lots of content that it will be noticable.
Regarding time
The value of a Date object is a 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 millisons 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 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
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
$endgroup$
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
add a comment |
$begingroup$
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 atdocument.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 withaddEventListener("load",startTime)But its not really needed as you have the interval call the function anyway. - You can access elements directly via their
idas long as you ensure that the id is unique on the page. If you use the same name for any otheridornameelement property then it will not work. - 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, its when you start to add lots of content that it will be noticable.
Regarding time
The value of a Date object is a 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 millisons 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 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
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
$endgroup$
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
add a comment |
$begingroup$
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 atdocument.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 withaddEventListener("load",startTime)But its not really needed as you have the interval call the function anyway. - You can access elements directly via their
idas long as you ensure that the id is unique on the page. If you use the same name for any otheridornameelement property then it will not work. - 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, its when you start to add lots of content that it will be noticable.
Regarding time
The value of a Date object is a 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 millisons 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 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
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
$endgroup$
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 atdocument.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 withaddEventListener("load",startTime)But its not really needed as you have the interval call the function anyway. - You can access elements directly via their
idas long as you ensure that the id is unique on the page. If you use the same name for any otheridornameelement property then it will not work. - 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, its when you start to add lots of content that it will be noticable.
Regarding time
The value of a Date object is a 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 millisons 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 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
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>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>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 div
font-family : arial;
font-size : 32px;
width : 100%;
text-align : center;
<div id="message"></div>
<div id="countDown"></div>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 div
font-family : arial;
font-size : 32px;
width : 100%;
text-align : center;
<div id="message"></div>
<div id="countDown"></div>answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
answered Oct 21 '18 at 1:17
Blindman67Blindman67
9,7051622
9,7051622
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
add a comment |
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
$begingroup$
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.
$endgroup$
– Foreel19
Oct 21 '18 at 1:41
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f205962%2fpomodoro-countdown-timer-synced-to-the-clock%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
