go to all blogs

Hello geeks,

Once again in this article we’ll create a very simple web-page with minimal HTML,CSS and more JavaScript this time.


Hex clock using JavaScript

Photo by Moritz Kindler on Unsplash

What is Hex clock?

For any color in RGB format,there is a specific code of length 6. Means that code consists of 6 letters/alphabets or combination of both. We’ll be only dealing with combination of digits as clock format doesn’t support any alphabets. So, in actual clock with 24Hr format in hh:mm:ss ,we can see total of 6 digits(hh+mm+ss). Now,for that combination of 6 digits,there always exists a unique color and we’d like to change background-color of our web-page according to combination of hex-code we’ve got and that’s why HEX-CLOCK

Say,time now is 11:50:46, then hex-code generated is #115046 and for that code there must exist a unique color which we’d change our background-color.

I hope that’s clear now,isn’t it?

Basic html setup for this example:

1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Hex-clock with pure Js</title>
5 </head>
6 <body style="color:white;"></body>
7</html>

The main idea behind this example is to change the background-color CSS rule of entire body of our page for every change in second hand of clock. Now,this can be done in 2 steps:

  1. Creating a function which calculates and updates hh:mm:ss for every second

  2. Actually changing background-color of page and displaying clock time as hex code on DOM


1function time() {
2 //constructor Date() built-in in Javascript
3 var date = new Date()
4 //getting hours,minutes,seconds from date
5 var hours = date.getHours()
6 var minutes = date.getMinutes()
7 var seconds = date.getSeconds()
8 var arr = [hours, minutes, seconds].map(function (num) {
9 return num < 10 ? '0' + num : String(num)
10 })
11
12 hours = arr[0]
13 minutes = arr[1]
14 seconds = arr[2]
15
16 return hours + ':' + minutes + ':' + seconds
17}

We’d understand working of time() with the help of example.

1console.log(new Date()):
2>>Sun Jul 15, 12:50:43 GMT +0530 (India Standard Time)

The time ,when the screenshot is taken is,12:50:43. We’re storing this exact output as above in our date variable and we’re calling 3 methods on it:

1.getHours(): This returns the hour value of date variable

1var hours = date.getHours() << 12 //RESULT: hours=12

2.getMinutes():This returns the minute value of date.

1var minutes = date.getMinutes() << 50 //RESULT:minutes=50

3.getSeconds(): This returns the seconds value of date.

1var seconds = date.getSeconds() << 43 //RESULT: seconds=43

Now,here comes the main part. Here,we’re gonna store above obtained values namely hours,minutes,seconds in an array and call map function on it. map() is a built-in JavaScript function suitable for arrays. What it does is take every element of array on which it is called upon and pass that array element as a argument to the function inside map(). The function inside map() is an anonymous function which means it doesn’t have any name but it does its work by receiving every element of array (called “num” in my code)as mentioned inside its function body.

Working of anonymous function of map():

We are using a simple return statement which evaluates a condition and based on that returns something. Here,I’ve used a ternary operator to return either ‘0'+num if condition is true or returns String(num) if it is false. This is the default behavior of ternary operator. For every element of array,the condition is going to be evaluated .

The condition here is to check whether elements inside our array are greater than 10 or not. We are doing this check because,as you might have guessed,suppose for time value like 8:8:18 (say for example),our final code obtained will be like #8818 and there is no color available for this hex code. So,here we can do 2 things:

  1. Convert the obtained code to 6 digit code using extra trailing zeroes for each single digit number

  2. Check whether obtained code is there inside infinitesimally long list of available colors or not

Here,I’ll be going with option 1 as it seems more favorable and will 100% give colors for every tick. So,that’s why if number is < 10,I’m adding a zero before and then storing it inside new array(var arr) as a element of array.

So,according to my example,my new array which holds formatted values of given current time(var arr) looks like this:


1var arr = ['12', '50', '43']

Now, I’m re-assigning hours,minutes,seconds variables to newly formatted values from the array and returning a string with “ : ” after and before to look like actual time format. ( “12”:”50":”43" like this).

Now,it’s time to actually update the background-color and display clock timings on the page which gets automatically updated and changed for every second.

Here comes the second function of our code,output(time) which receives a string as a argument and the argument passed to output() is the return statement of our time() function. Sounds confusing?.It actually isn’t!


1function output(time) {
2 var color = '# ' + time
3 document.body.bgColor = color
4 document.body.textContent = color
5}

Working of output() function:

Argument received is added with ‘# ’ and stored in a variable to output something like this: #12:50:43 on our page. Then,we are changing background-color property and after, displaying out our nicely formatted time value on DOM.

Now,in order to update DOM after every second we need a function which automatically runs after every second. Thanks to js, we’ve such function available and its called setInterval() which receives a function as a first argument and a number which is a value in milliseconds after which you want to run first argument(a function) and keep this process going until the user manually disrupts its cycle by either closing the tab/window.

output(time()) => This is exactly what we discussed above,we need a function to run after receiving output of time() function and pass it to some other function. Hence,we are calling output() after completion of time() after every second using setInterval().

1setInterval(output(time()), 100)

Conclusion

So,here we are done with our little,quick tutorial on Hex-Clock.

I hope you find it interesting, useful!

Here’s my code-pen link to same example: https://codepen.io/dalalRohit/pen/NBxPmd

Thanks for reading this one.

Good bye :)