HTML5 – Interactivity With DOM_CSS

HTML5 – Interactivity With DOM_CSS

Methods Used

As shown in Figure 1.0, noticeably there are two new functionalities, the first by means of an external JAVASCRIPT file <script src=”js/custom.js” type=”text/javascript”></script>. This works similarly to linking an external CSS file and it’s content. The seconds is the use on the action listener onclick in which the JAVASCRIPT function call is made and a parameter passed to it.

Figure 1.0 is the default HTML display and is also the DAY time display setting for this exercise, When the ‘Make Day’ button is clicked, it makes a call to the JAVASCRIPT function WhatTimeIsIt(parameter) and passes a parameter, in this case, it passes the value ‘day’. Clicking ‘Make Night’ follows the same series of actions except that passes the value ‘night’ and the result is displayed in Figure 1.1.

JAVASCRIPT Function

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.

CSS

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

Screen Shot 2016-06-09 at 2.54.47 PM.png

Figure 1.1 Display HTML Code snippet and the Make Night setting

Screen Shot 2016-06-09 at 2.54.53 PM.png

Figure 1.2 Display Javascript Code snippet and the function responsible for setting both night and day

Screen Shot 2016-06-09 at 2.55.39 PM.png

Figure 1.3 Display CSS Code snippet and the configures for the different tags

Screen Shot 2016-06-09 at 2.55.28 PM.png

Leave a Reply

Your email address will not be published. Required fields are marked *

Groope Multimedia © 2019, All rights reserved