Breaks countdown timer.

I’ve been playing around with Javascript quite a bit lately and am steadily getting more familiar with its syntax and coding. I’ve been coming up with ideas for new scripts and have been having lots of fun coding them. Truly, this is the best way to learn.

Recently I was cleaning up my script that counts down to my job’s quitting time of 6pm when I came up with a very cool idea. Why not have the script count down to my breaks as well? A short time later I had just the script to do the trick.

<!DOCTYPE html>
<html>
<body>
<p id=”break1″>Morning Break:</p>
<p id=”lunch”>Lunch:</p>
<p id=”break2″>Afternoon Break:</p>
<p id=”outtahere”>Quitting Time:</p>
<button onclick=”myFunction()”>Count down!</button>

<script>
function myFunction()
{
var now = new Date();
var mhrs = 10-now.getHours();
var lhrs = 12-now.getHours();
var lmins = 15-now.getMinutes();
if (lmins < 0) { lmins += 60; }
var ahrs = 15-now.getHours();
var qhrs = 17-now.getHours();
if (mhrs < 0) { mhrs += 24; }
if (lhrs < 0) { lhrs += 24; }
if (ahrs < 0) { ahrs += 24; }
if (qhrs < 0) { qhrs += 24; }
var mins = 60-now.getMinutes();
document.getElementById(‘break1’).innerHTML=’Morning Break: ‘ + mhrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘lunch’).innerHTML=’Lunch: ‘ +lhrs+’ hours, ‘+lmins+’ minutes.’;
document.getElementById(‘break2’).innerHTML=’Afternoon Break: ‘ + ahrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘outtahere’).innerHTML=’Quitting Time: ‘ +qhrs+’ hours, ‘+mins+’ minutes.’;
}
</script>
</body>
</html>

At my job, my morning break is at 11:00am, my lunch break is at 1:15pm, my afternoon break is at 4:00pm and quitting time is 6pm. The script calculates the time remaining until each of those breaks when I click on the “Count Down” button. I didn’t want to have the script run continuously as I wanted to save it as a note in Simplenote, which supports Markdown text and HTML. The script works really well and helps make my job more tolerable as I approach those lifesaving breaks.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s