HTML and CSS Reference
In-Depth Information
Perform the following tasks:
1. Start Notepad++ and open the file lab10-2.html from the Chapter10\IntheLab folder of the Data
Files for Students.
2. Save the file as lab10-2solution.html.
3. Using the code from Table 10-1 on page HTML 458 as a guide, create a form with one text field
for a scrolling message between the <div> tags at line 55. Name the form msgForm, the input text
field messageBox, and make the text field size 32.
4. Create a <script> section in the <head> section for the user-defined functions.
5. Using the code presented in Figures 10-4 through 10-10 on pages HTML 460 through HTML 464
as a guide, write the user-defined function called textMsg(). Assign the message string “** Remember,
you should add about 10% more to your order so you do not run short. **” to a variable named
concreteMsg.
6. Use 200 for the setTimeout() method to recursively call the textMsg() function.
7. Using the code in Tables 10-14 and 10-15 on pages HTML 475 and HTML 476 as a guide, write
the JavaScript user-defined function concreteCalc() to validate the data entered into the form as
numeric and not less than 0.
8. Assign the length value to iLength, the width value to iWidth, and the depth value to iDepth.
9. Once the data is validated as numeric, calculate the cubicInches by multiplying iLength times
iWidth times iDepth. Calculate the cubicFeet by dividing the cubicInches by 1728. Calculate the
cubicYards by dividing the cubicFeet by 27.
10. Assign the cubicYards to the yards text field using the toFixed() method with 2 decimal places.
11. If an error occurs, check your code from Steps 3 through 10 and save and test again. Do not
continue unless there are no errors.
12. Using the code in Table 10-29 on page HTML 489, write a user-defined function that opens a
pop-up window using the file lab10-2announce.html. Set the window size to 545 pixels wide by
330 pixels high.
13. Use the code in Table 10-30 on page HTML 491 as a guide to enter a <div> tag with an id
concreteLastDate, and an inline style of margin-left 20% before the closing </body> tag.
14. Use the code in Table 10-31 on page HTML 491 as a guide to enter the user-defined function
to display the date the Web page was last modified, as shown in Figure 10-45.
15. Be sure to enter the event handlers as needed in the form and the <body> tag.
16. Save the completed HTML file, validate, and test the Web page using your browser using the
values shown in Figure 10-45.
17. If an error occurs, check your code from Steps 12 through 16, save, and test again.
18. Submit the completed HTML file and Web page in the format specified by your instructor.
