Introduction to Computer Programming

Homework 5

The goal of this exercise is to build a better clock (at least better than the one from the previous exercise). Now your clock will update without having to reload the entire page each time, and it will have separate displays for the date and hours and minutes.

Assignment

Your goal is to make a working clock which keeps accurate time without refershing the page. The clock will show the current date and time, and should look something like this:

To accomplish this goal your web page should have the following:

All the general structure of a web page that you've seen in previous assignments, using "HTML", "HEAD" and "BODY" tags (dont' forget to close them).
A tab title (using the "TITLE" tag) which says simply "Clock 2".
Arrange the overall layout of the clock using an HTML table, with one table cell for each element of the date and time.
Create a JavaScript function called refreshClock() which uses a JavaScript Date object to get the current date and time, and then uses the innerHTML property of each table cell to put the correct information in each cell.
Uses the JavaScript setTimeout() function to cause the refreshClock() function to be invoked one second in the future.

The visual display of your clock should match the example shown above as much as possible, though you do not need to reproduce the AM/PM indicator or the colon dots between the hours and minutes (those will be the subject of the next exercise).

Your clock should have the following properties:

The clock should be at least 80% the width of the page, and should be centered on the page. Going all the way across the page is fine.
The body (or "case") of the clock should be some shade of gray or silver, as in the example above.
The cells in which the date and time elements are displayed should have a black background.
The font used for the date and time elements should be as big as possible, and you should use capital letters.
The font used for the date and time elements should be bright green.
As in the example, each display element should have a lable above it, each with white letters on a red background using capital letters in a sans-serif font.
As in the example, the clock should have a label below the date and time which says "Present Time" in all capital letters in a white sans-serif font on a black background.

Reading

The layout of the clock display will be created using an HTML table. This is discussed in Chapter 6.
The content of each cell of the table will be set using the innerHTML property. Specific cells of the table can be referenced using the document.getElementById() method. Both are discussed in Chapter 15.

Submission

The name of the file for this web page should be your first name, followed by the initial letter of your last name, followed by the two digits "05". The file extension should be ".html". So, for example, a student by the name of Jean Bartik would create a file called "JeanB05.html".

To submit your assignment you should print a copy of the source code file, and print a copy of the resulting "output" (what it looks like in a browser). Staple the two together, with the ouput page on top, and put your name on the top of the first page.

You should also upload a copy of your file to http://www.EricMyers.com/student/dla/upload_hw.php