I once found a neat little web page that showed the actual time as the background color. You can see a small version of the web page to the right. The JavaScript on the web page took the actual time value, hours : minutes : seconds, and used those numbers as the RGB value for the background color. For some reason I found this web page really fascinating, however I thought that there might be ways of improving or at least further extend the web page.
The following pages are showing my way to implementing my version of the color clock. Here I will present and discuss HTML5, CSS3, as well as the JavaScripts used to present text on a web page, convert to hexadecimal values, search strings in an array, and finding the nearest HTML and CSS defined RGB value.
Using the following step-by-step-like instructions you will learn about HTML, CSS, and JavaScript. You will also be able to make your own version of the color clock, and hopefully further improve it.
The following pages contains more theoretical information and code examples to the left, while the implementation of this information will be shown to the right.
It is worth mentioning that HTML is the content of a web page, CSS is the appearance of the web page, and JavaScript is the behavior of the web page.
All HTML, CSS, and JavaScript files are easily editable in any text editor of your choice. Use .html and .css and .js as file extensions. Good practise is to only use lowercase letters and avoid spaces in the file names.
The color clock I found on the Internet and got inspired by:
http://whatcolourisit.scn9a.org/
However, the original web site does not exist anymore.
The navigation list above will help you navigate these pages. Steps marked with HTML will mainly concern the HTML code, the content. Steps marked with JS will focus on the JavaScript, the behavior, while steps marked with CSS will address the CSS code and the appearance of the color clock web page.