HTML and CSS Reference
Complete the following:
1. Using your text editor, open twinstxt.htm , tlmtxt.css , and fonttxt.js from the
tutorial.13\case1 folder. Enter your name 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
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 associ-
ated with those buttons to -0.1 for the fontdown.png image and 0.1 for 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 within
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
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
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 that collec-
tion and add an event handler to each item in the collection to run the resizeText()
function when clicked.
10. Create the resizetext() 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 that value is changed, all object sizes based on em units automatically will be
resized. Add the following 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 the 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
change 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.
13. Submit your completed files to your instructor, in either printed or electronic form,