CST295: Web Programming with JavaScript
Project 10: Chapter 22
-
Create a four page website, a "Home Page" and three (3) JavaScript
application pages, in which all four
of the web documents share the following elements:
-
The
<head> element should include:
-
a comment with your name and
the project due date
-
a
<title> element with the title
"Project No. 10"
-
a
<meta> element that references
the "UTF-8" character set
-
a
<link> element that links to
a stylesheet that incorporates both formatting and layout
as per your own specifications
-
The structure of the document within the
<body>
element contains header, nav,
section and footer blocks all of your
own design (except as noted just below)
-
The
nav block within the the <body>
element includes links to all four web pages in the website and
incorporates a "rollover" effect of your own choice; or optionally
substitute for the "rollover" menu in the head block
an img with an image map
with links to the four web documents
-
The
section block within the the <body>
element includes either the project instructions on the
"Home Page" or the JavaScript code for each page depending
upon which document it is (see below)
-
The
footer block within the the <body>
element includes an <address> block which
contains a script that writes to the document window a
date object instantiated to the current system
date formatted to the toString representation
-
The formatting and layout elements for the CSS stylesheet properties
are per your own design and specifications; for a higher grade you
should use extensive creative and professional-looking stylesheet
formatting
-
The
section block within the the <body>
element of the "Home Page" includes (see below):
-
A
<p> (paragraph) that is a general description
of the overall project
-
An unordered list with descriptions of each of the JavaScript
assigned applications
-
All three of the web documents will use "Geolocation" and the "Google Maps"
API to embed maps into the
section block (it does not matter
that due to account limitations the maps will be greyed out and covered
with a watermark):
-
All three maps should use the
load event to draw
the map as soon as the web document loads
-
One map should use "Geolocation" to draw the map at the user's
current location
-
For the other two maps, find the latitude and longitude of a
particular place so that the maps show those locations
-
In all three maps use a wide variety of "Google Map" properties
and elements (diffent elements on each page)
-
At least one of the web documents should include some type of
Google Maps event handling, e.g.
center_changed,
click, zoom_changed, etc.
-
In the
section block with the map add a paragraph
<p> of content that explains features of
each specific map
-
Students may work on all projects in teams
of two or three, and, if so, all students in the group must submit
the same project to their own dropboxes in Blackboard. In the
text box's dropbox, as well as in the source code documentation
(comments), state the name(s) of the classmate(s) with whom you
worked.
-
The completed project with a .ZIP file of the
entire folder containing the all files that
make up the website submitted electronically via an attachment to a
Blackboard
dropbox is due to Prof. Struck no later than 11:59 p.m. on the date
listed in the course outline.