HTML and CSS Reference
Case Problem 1
Use arrays, loops,
create a list of
Data Files needed for this case Problem: april.js, clisttxt.htm, lback.png, lhouse.css,
modernizr-1.5.js, tables.css, tablestxt.js
The Lighthouse The Lighthouse is a charitable organization located in central Kentucky
that matches donors with needy groups. The fundraising coordinator for The Lighthouse
is Aaron Kitchen. On an administration Web page available only to Lighthouse staff,
Aaron wants to display a list of information on recent donations, including the name and
address of the donor, the amount donated, and the date of the donation. A list of dona-
tions from the last month has been downloaded from an external database and stored
in a collection of arrays named firstName, , lastName , street , city , state , zip , amount , and
date . Aaron needs your help with displaying the data from those arrays in a Web table.
He also wants a summary table that displays the total number of contributors and the
total contribution amount. Figure 12-36 shows a preview of the Web page you'll create.
april contributor list at the lighthouse
Complete the following:
1. Using your text editor, open clisttxt.htm and tablestxt.js from the tutorial.12\case1
folder. Enter your name and the date in the head section, and then save the files as
clist.htm and tables.js , respectively.
2. Go to the clist.htm file in your text editor. The firstName, , lastName , street , city ,
state , zip , amount , and date arrays have been created and populated for you in
the april.js file. In the head section of the document, insert a script element that
points to this file.
3. Aaron already has created a style sheet for the tables that will display the list of con-
tributors and the summary of their contributions. Add a link to the tables.css style
sheet in the Web page.
4. Save your changes to the file, and then go to the tables.js file in your text editor.