Computer Tutorial Case Problem
I HAVE ATTACHED 2 SEPERATE FOLDERS; PLEASE VIEW BOTH OF THEM AS FOR THE FILES THAT ARE NEEDED ARE INCLUDED.
Complete the following:

1. Using your text editor, open twinstxt.htm, tlmtxt.css, and fontxt.js from the folder named “Mod7-Tut13-CP1” that’s added as an attachment. Enter your name (Dave) and the date in the head section, and then save the files as twins.htm, tlm.css, and fontsizer.js, respectively.

2. Go to the twins.htm file in your text editor and add a script element linking to the fontsizer.js file.

3. Scroll down the file and locate the fontbuttons div element, which contains two image buttons. Place both image buttons in the fontsizer class. Set the values associated with those buttons -0.1 fir the fontdown.png image and 0.1 for the fontup.png.

4. Save your changes to the file, and then go to the tlm.css file in your text editor.

5. At the bottom of the file, insert a style rule to set the width of the inline image with the figure box in the article element to 12em.

6. Add another rule to set the font size of paragraph text within the article element to 1em.

7. Save your changes to the file, and then go to the fontsizer.js file in your text editor.

8. Add a command to run the startup() function when the page is initially loaded by the browser.

9. Create the startup() function. The purpose of this function is to apply onclick event handlers to the two font resize buttons. Create the fontButtons variable containing all of the page elements that belong to the fontsizer class. Loop through the collection and add an event handler to each item in the collection to run the resizeText() function when clicked.

10. Create the resizefont() function. The purpose of this function is to change the default font size of the document body based on the value of the font button being clicked. When the value is changed, all object sizes based on em units automatically will be resized. Add the follow commands to the function:

a. using the parseFloat ( ) function, store the numeric value of the button being clicked in the fontChange variable.

b. Next, you must determine whether an inline style has been used to set the default document body font size. First, test whether the font size of the document body is equal to an empty text string. If it is, set the font size to 1.0em. (Hint: Use the reference document.body to reference to document body.

c. Use the parseFloat ( ) function to store the numeric value of the document body font size in the currentFontSize variable.

d. Change the document body font size to the text string
current font size + font change + “em”

Where current font size is the value of the currentFontSize variable and font changes is the value of the fontChange variable.

11. Document your code with appropriate comments throughout.

12. Save your changes to the file, and then load twins.htm in your Web browser. Verify that when you click the buttons to increase or decrease the font size, the paragraph text and the size of the author’s photo change in response, but no other part of the Web page changes in size.