HTML and CSS Reference
In-Depth Information
Case Problem 1
Use arrays, loops,
and conditional
statements to
create a list of
contributors.
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.
Figure 12-36
april contributor list at the lighthouse
ssuaphotos/Shutterstock.com
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.
