Make a colour clock with JS

I need to start by saying that this post isn't supposed to be a tutorial. It skims the basics of how the code works but to find out more you will have to have a look for yourself via the links at the bottom of this article.

What started as a seemingly simple task became more and more complex as time went on. The aim was to make a Clock which was accompanied by colour, I also went out of my way to accompany the time with a message where applicable.

Credit is due to Jordan who helped me with a large amount of the JS and wrote some really cool & flexible code that makes this application easier to maintain and expand(The link to his article appears later in the post).

We've worked using an OOP approach and tried to keep things as clean and neat as possible, the whole application is wrote in vanilla JS.

As always feedback is encouraged so don't hesitate to get in touch @webknit.

The colours

The colour code is relatively straightforwards. I'm obtaining the hours, mins and seconds and adding zeros. I'm then applying the HEX# to the body background colour.

				
					// Get the date/time information
this.today = new Date();
this.hours = ColorClock.today.getHours();
this.mins = ColorClock.today.getMinutes();
this.secs = ColorClock.today.getSeconds();


// Add zeros onto the time digits to help us change colour
if(this.hours < 10) this.hours = '0' + this.hours;
if(this.mins < 10) this.mins = '0' + this.mins;
if(this.secs < 10) this.secs = '0' + this.secs;


// Output the time
document.getElementById('js-time').innerHTML = this.hours + ':' + this.mins + ':' + this.secs;


// Change the bg colour based on the time
this.changeBgColour(this.hours, this.mins, this.secs);


// Changed the # of the body colour based on the time
document.body.style.backgroundColor = '#' + hour + min + sec;

The announcement

I initially started with a load of if statements like this.

				
					if(day == 6 || day == 0) {
status = "What are you doing here? It's the weekend!"
}

else if(hour >= 12 && hour < 13) {
status = "It's dinner time!!"
}

else if(hour >= 17 && hour < 23) {
status = "It's hometime, get yourself home!"
}

Obviously that's not very flexible and if we need to add extra messages going forwards we have to re-write those if statements. This is where Jordan stepped in to engineer a solution that would be more future proof.

At this point you need to check out Jordan's post about how he refactored these if statements

I would highly recommend looking through the Code to see what's going on, alternately you can have a play with the Codepen and test it for yourself.

You can view the live project here.

Thanks for reading!

Made by

Jordan Lane

Developing the web, learning about life. Developer @SteinIAS_EMEA

Made by

Shane Prendergast

A Web Designer & Developer who's the creator of this website. He freelances via Webknit and has an obsession with side projects.

Wednesday4th February 2015

Make a colour clock with JS

There’s a client who feels guilty that his workers always work into their dinner hour as the workplace doesn’t have enough clocks. He’s bought a number of screens and want a screensaver/website that makes it easy for employees to tell the time.

However just displaying the time is a bit boring and he wants the time to be accompanied with colour. It’s up to decide how to employ the time and colour combo!

Design | Development

Latest work

Homepage for a butchers website

View work