CST295: Web Programming with JavaScript
Project 2: Chapter 5
-
Create a five (5) page website in which all five
of the web documents (the startup files)
share the following elements:
-
The
<head> element should include:
(1) a comment with your name and
the project due date;
(2) a <title> element with the title
"Project No. 2";
(3) a <meta> element that references
the "UTF-8" character set;
(4) a <link> element that links to
the "sa_layout.css" stylesheet;
(5) a <link> element that links to
the "sa_styles.css" stylesheet; and
(6) a <link> element that creates
a shortcut icon (favicon) from the "javascript.ico"
icon file (test the favicon in several browsers since
it generally does not work in Internet Explorer)
-
The structure of the document within the
<body>
element contains header, nav,
section and footer blocks
-
The
header block within the the <body>
element includes:
(1) an <img> element using the
"javascript-illustration.png" image with the alt
attribute "JavaScript Illustration"; and
(2) an <h2> element with the text "Project No. 2",
an en-dash (not an em-dash) and additional text depending upon which
document it is
-
The
nav block within the the <body>
element includes a ul li structure with <a>
(anchor) elements that link to all five (5) web documents in
the website (the "sa_styles.css" CSS stylesheet which you create
based on the instructions below converts this unordered list into
the "rollover" effect)
-
The
section block within the the <body>
element includes:
(1) an <h2> element with headings that vary
for each of the five (5) web documents (see below); and
(2) either the assignment instructions on the "Home Page" (see
below) or the JavaScript code for a 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
-
Set the following CSS stylesheet properties for the "sa_styles.css" file:
-
For the
body selector, set the font typeface
first to 'Comic Sans MS' and then to the generic serif
-
For the
header h1 selector, set:
(1) the background color to rgb(100, 100, 255);
(2) the text color to white;
(3) the font size to 1.9em;
(4) text alignment to center; and
(5) letter spacing to 0.4em
-
For the
section h2 selector, set:
(1) the background color to cornflower blue;
(2) the text color to white;
(3) letter spacing to 0.4em; and
(4) text indent to 1em
-
For the
nav ul selector, set:
(1) the list style type to none;
(2) left padding to 0.5em;
(3) the background color to goldenrod; and
(4) line height to 2.5em
-
For the
nav ul li:hover selector, set the
background color to gold
-
For the
nav ul li a selector, set:
(1) the text color to white;
(2) the font-size to 1.25em; and
(3) text decoration to none
-
For the
table selector, set:
(1) the border to solid; and
(2) the width to 100%
-
For the
table tr td selector, set:
(1) the border to double;
(2) text align to center; and
(3) the width to 50%
-
For the
section ul li selector, set the list style
image to the "arrow.png" file
-
For the
footer address selector, set:
(1) the background color to cornflower blue;
(2) the color to white; and
(3) text align to center
-
The
section block within the the <body>
element of the "Home Page" includes (see below):
-
A
<p> (paragraph) that begins "The project is
designed ..."
-
An unordered list with instructions for each of the five (5)
web documents in the website
<
-
The
section block within the the <body>
element of "Part 1 (Semester Grades)" includes an <h2>
heading with the label "Semester Grades" and a <script>
as follows (see below):
-
Prompt the user to input a semester average between 0 to 100
-
Parse the user input to an integer
-
Use the linear
if ... else if ... structure to test
for the following ranges: 90 or above is "A", 85 to 89 is "B+",
80 to 84 is "B", 75 to 79 is "C+", 70 to 74 is "C",
65 to 69 is "D+", 60 to 64 is "D" and below 60 is "F"
-
Display the user input to the document window
-
Display the result of processing to the document window
-
The
section block within the the <body>
element of "Part 2 (What Day Is It?)" includes an <h2>
heading with the label "What Day Is It?" and a <script>
as follows (see below):
-
Prompt the user to input a day abbreviation or day number
-
Use the
switch structure to test for the following
valid values: "Sun" or "1" is "Sunday", "Mon" or "2" is "Monday",
"Tue" or "3" is "Tuesday", "Wed" or "4" is "Wednesday",
"Thu" or "Thur" or "5" is "Thursday", "Fri" or "6" is "Friday",
"Sat" or "7" is "Saturday" and any other input value is
"(Abbreviation or number invalid)"
-
Display the user input to the document window
-
Display the result of processing to the document window
-
The
section block within the the <body>
element of "Part 3 (Temp Conversions)" includes an <h2>
heading with the label "Temperature Conversions" and a <script>
as follows (see below):
-
Create an HTML
table
-
Loop through the Celsius values from zero (0) to 100 using
a
for loop (increment by 10's) and calculate the
corresponding Fahrenheit values
-
Display the results of all temperature conversion processing to
rows and cells of the
table in the document window
-
The
section block within the the <body>
element of "Part 4 (Split a Phrase)" includes an <h2>
heading with the label "Split a Phrase" and a <script>
as follows (see below):
-
Prompt the user to input a phrase or sentence
-
Split the phrase into "tokens" and store the result into
an array
-
Create an HTML
table
-
Loop through the tokens in the array using a
for in
loop and display the index and array elements to rows and cells
of the table in the document window
-
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.