Step 6 - Adding more HTML elements and additional JavaScript code

Showing the color codes

It would be nice to be able to display the actual hexadecimal value as well as the RGB value of the background color. To do that we need to add another parargraph <p> in the HTML code, insert a <span>, and give the span an id "colorcodes".

<p>
<span id="colorcodes"></span>
</p>

Then we need to update the JavaScript so that the color codes are updated in the span with id "colorcodes". First we need to combine our time values to a new string, that is the strings in rgbHour, rgbMinute, and rgbSecond, separated with a comma.

// Make string for RGB
var rgbValue = rgbHour + "," + rgbMinute + "," + rgbSecond;

We already have the hexadecimal value in the variable hex, so we do not need to work with that. Instead we write a code to update the content of the span element with id "colorcodes".

// Update the text in id "colorcodes" with the hex and RGB values
$("#colorcodes").html("Background color: "+ hex +", RGB: "+ rgbValue);