Introduction to Computer Programming
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
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:
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).
- 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.
current date and time, and then uses the innerHTML
property of each table cell to put the correct information
in each cell.
refreshClock() function to be invoked one second
in the future.
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
- 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.
- 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
Specific cells of the table can be referenced using
the document.getElementById() method.
Both are discussed in Chapter 15.
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
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