Figure 1.2, shows the function that is invoked when the onclick attribute of the input type button, makes the call and passes the value. The function accepts a string parameter, uses the console log function to print the value to the browser’s console window(This is very useful for testing purposes). The value is then checked, if it is equal to ‘night’ then it adds the CSS CLASS night to the body tag of the HTML DOCUMENT, if not it assumes it day and adds CSS CLASS day to the body tag using the DOM document.body.className.
Figure 1.3, shows the different tags, attributes, and values used in the HTML DOCUMENT using <link href=”css/style.css” rel=”stylesheet” type=”text/css”/> to link the stylesheet. By setting the body background color to ‘white’, we declare the default TIME OF DAY to be the day.
The Classes .night and .day is used to set the different background colors as well as the text color of the H3 tag.
H3 tag is used for the ‘Hello World’ string, which in the case is a header.
input[type=button] is used a selector, this set the styling of all the input type which is equal to ‘button’. input[type=button]:hover, speaks to the hovering of the mouse pointer. When the mouse pointer is hovering this selector applies the new background color, which is a darker gray.
Figure 1.0 Display HTML Code snippet and the Default/Day setting
Figure 1.1 Display HTML Code snippet and the Make Night setting
Figure 1.3 Display CSS Code snippet and the configures for the different tags