New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 1 The Lighthouse

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 1 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 donations 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.

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 contributors 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.
5. Add a function named showTable() that will be used to display the table containing the contributor list. The function has no parameters. Add the following commands to the function:
a. Write the following code to the document to create the header row for the table of contributions:
<table id=’contributors’>
<thead>
<tr>
<th>Date</th><th>Amount</th>
<th>First Name</th><th>Last Name</th>
<th>Address</th>
</tr>
</thead>
b. Write the <tbody> tag to the document.
c. Next, you’ll create a table row for each person listed in the lastName array. Create a for loop that loops through each entry in the lastName array. Each time through the loop, write the HTML code
<tr>
<td>date</td>
<td class=’amt’>amount</td>
<td>firstName</td>
<td>lastName</td>
<td>street <br />
city, state zip
</td>
</tr>
to the document, where date, amount, firstName, lastName, street, city, state, and zip are the items from the date, amount, firstName, lastName, street, city, and zip arrays, respectively, corresponding to the value from the counter variable in the for loop.
d. After the for loop, write the </tbody> tag to close off the table body.
e. Write the </table> tag to close off the Web table.
6. Create a function named showSummary() that will be used to calculate and display the total number of contributors and the total amount of contributions. The function has no parameters. Add the following commands to the function:
a. Declare the total variable, setting its initial value to 0.
b. Loop through each of the entries in the amount array, adding each item’s value to the total variable.
c. Write the HTML code
<table id=’sumTable’>
<tr>
<th id=’sumTitle’ colspan=’2′>Summary</th>
</tr>
<tr>
<th>Contributors</th>
<td>contributors</td>
</tr>
<tr>
<th>Amount</th>
<td>$total</td>
</tr>
</table>
to the document, where contributors is the length of the lastName array and total is the value of the total variable.
7. Document your code using descriptive comments. Close the file, saving your changes, and then return to the clist.htm file in your text editor.
8. Add a script element to link to the tables.js file you created.
9. Scroll down to the figure box for the contribution totals. Within the figure box, insert a script element that runs the showSummary() function.
10. Scroll down to the figure box for the contributors data list. Within the figure box, insert a script element that runs the showTable() function.
11. Save your changes to the file, and then open clist.htm in your Web browser. Verify that the summary and contributor list tables appear as shown in Figure 12-36.
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.