Step 7a - Yet more HTML elements and adding CSS styles

Showing different color shades

The next thing I want to do is to make different interpretations of the time values. At the moment the time is using the whole range of the RGB values, but I would like to make different shades, a more red, a more green, and a more blue background color. And while at it, it would be fun to invert the original RGB values, as well as implement the narrow range of 24 hours, 60 minutes, and 60 seconds. To do this we are going to use radio buttons to select the shade of the background colors. This means that we need to add some HTML code, CSS code, as well as JavaScript code.

First we need to add the radio buttons in the HTML code. Since we want these radio buttons in the same paragraph as the color codes we need to break the row <br> after the span that shows the color codes. A span is an HTML element that is used to do changes to a text within a larger text. By default no radio button is selected in HTML, why we need to add checked to the first (the RGB) radio button.

<span id="colorcodes"></span><br>
<span class="radioButtons">
<input type="radio" name="colorSelection" value="0" checked>
<label>RGB</label>
<input type="radio" name="colorSelection" value="1">
<label>Reddish</label>
<input type="radio" name="colorSelection" value="2">
<label>Greenish</label>
<input type="radio" name="colorSelection" value="3">
<label>Bluish</label>
<input type="radio" name="colorSelection" value="4">
<label>Inverted RGB</label>
<input type="radio" name="colorSelection" value="5">
<label>Actual hex value</label>
</span>

Then we need to add the class "radioButtons" in the CSS code, specifying the font size of the labels, as well as the size of the radio buttons. By using vw the size will be dependent on the screen size of the web browser.

.radioButtons {
font-size: 1.5vw;
}
input[type=radio] {
width: 1vw;
}