The Lighthouse
This is Case 1 of Tutorial 3. This is different than any other one than I’ve posted, as the main working Javascript is in the HTML page. I’m going to do this format different tonight.
<html>
<head>
<title>The Lighthouse</title>
<link href=”lhouse.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”list.js”></script>
<script type=”text/javascript”>
function amountTotal() {
total=0;
for (var i=0; i<amount.length; i++) {
total+=amount[i];
}
return total;
}
</script>
</head>
<body>
<div id=”title”>
<img src=”logo.jpg” alt=”The Lighthouse” />
The Lighthouse<br />
543 Oak Street<br />
Delphi, KY 89011<br/>
(542) 555-7511
</div>
<div id=”data_list”>
<script type=”text/javascript”>
document.write(“<table border=’1′ rules=’rows’ cellspacing=’0′>”);
document.write(“<tr><th>Date</th><th>Amount</th><th>First Name</th>”);
document.write(“<th>Last Name</th><th>Address</th></tr>”);
for (i=0; i< amount.length; i++) {
if (i%2==0) document.write(“<tr>”);
else document.write(“<tr class=’yellowrow’>”);
document.write(“<td>”+date[i]+”</td>”);
document.write(“<td class=’amt’>”+amount[i]+”</td>”);
document.write(“<td>”+firstName[i]+”</td>”);
document.write(“<td>”+lastName[i]+”</td>”);
document.write(“<td>”);
document.write(street[i]+”<br />”);
document.write(city[i]+”, “+state[i]+” “+zip[i]);
document.write(“</td>”);
document.write(“</tr>”);
}
document.write(“</table>”);
</script>
</div>
<div id=”totals”>
<script type=”text/javascript”>
document.write(“<table border=’1′ cellspacing=’1′>”);
document.write(“<tr><th id=’sumTitle’ colspan=’2′>Summary</th></tr>”);
document.write(“<tr><th>Contributors</th>”);
document.write(“<td>”+amount.length+”</td></tr>”);
document.write(“<tr><th>Amount</th>”);
document.write(“<td>$”+amountTotal()+”</td></tr>”);
document.write(“</table>”);
</script>
</div>
</body>
</html>
That’s pretty much all there is to it. It’s not too bad. The files lhouse.css and list.js are included, and nothing has to be done to them. I’ll answer any questions you need. Visit my contact page for any questions.
Leave a Reply