Hexadecimal Color Clock In JavaScript – clock.js

Preview:

Description:

A Vanilla JavaScript library to create a creative digital clock representing the current time as a hexadecimal color value and changing the background color accordingly.

How to use it:

1. Create a container to hold the hex color clock.

<div id="clock"></div>

2. Download the library and insert the clock.js into the document when needed.

<script src="clock.js" defer></script>

3. Or insert the following JavaScript snippets into the existing JS file.

setInterval(function() {
  today = new Date();
  hex = "#" + (today.getHours() < 10 ? '0' : '') + today.getHours() + "" + (today.getMinutes() < 10 ? '0' : '') + today.getMinutes() + "" + (today.getSeconds() < 10 ? '0' : '') + today.getSeconds();
  document.querySelector("#clock").innerHTML = hex;
  document.body.style.backgroundColor = hex;
}, 1)