Skip to content

JamelHammoud/hextime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A clock that represents the time as hex color values

I saw a project a little while ago, where I discovered that the time (in format 00:00:00) works perfectly for hexadecimal codes. I decided to create a very small project using vanilla JS, to represent the live time as a color.

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)

This small codeblock gets the current time, formats it (placing a zero before the number if it is less than ten) and then appends an # before it. That newly created hex code is then placed within the #clock element, and is set as the backgroundColor of the body. Changing the color of the background with the hex color gives the site an almost meditative feel.

Feel free to play around with the code!

See it live Here.

About

The time represented as hex color values

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages