CST295: Web Programming with JavaScript
Project 6: Chapters 15 & 16
-
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. 6"
-
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
-
The Part 1 web document "Growing Pumpkins" includes:
-
In the
section
block of the <body
>
element write a script that:
-
Loops 10 times and builds a
string
of ten "pumpkin"
img
objects with onclick()
event
handlers that pass the this
reference to the called
function
in the <head
> script
(see below)
-
Updates (sets) the
string
as the innerHTML
value of the 'myParagraph' paragraph
-
In a <
head
> script that executes when the onclick()
event "fires" (see above regarding the event handler) for any of the ten images
from above:
-
Creates an HTMLCollection object from all
img
elements in the document
-
Then loops though all ten images in the collection adding 5 pixels
to the
width
and height
properties of each
succeeding image element from left to right starting from their original
dimensions of 50 pixels wide and high
-
The Part 2 web document "Currency Converter" application converts
US Dollars into other foreign currencies and includes:
-
In the
section
block of the <body
>
element, create an HTML document with a layout
(use CSS for the layout, not a table
)
similar to the one in the image below that includes:
-
An
input
'Textbox' element to allow the user to enter
the amount in US dollars to be converted to another currency
-
A
select
'DropDownList' block with option
elements for each of the currency conversions as per the image below:
On the Internet, lookup the current conversion rates
for each of the currencies above and assign those numbers as the value
attributes for each of the related option
elements within
the block
-
A
button
element with an onclick
event
handler to the JavaScript function
in the
<head
>
element as defined below
-
A paragraph
<p>
element directly above the button
that displays the output for this application (see image below)
-
In a <
head
> script that executes when the onclick()
event "fires" for the button
element:
-
Assign the "dollars"
value
from the input
'Textbox'
element to a variable
-
Assign the "conversion rate"
value
from the select
'DropDownList' block to a variable
-
Calculate the "conversion amount" by multiplying the "dollars" variable times
the "conversion rate" variable and assigns the result to another variable
-
Write the "conversion amount" variable plus descriptive label to the
innerHTML
property of the output paragraph <p>
element as per the image below
-
The Part 3 web document "Add <table> Block" application converts
US Dollars into other foreign currencies and includes:
-
In the
section
block of the <body
> element,
implement a nested for
loop that
strictly with JavaScript code creates an HTML
table
as per the image below in which the script
:
-
Defines a variable of type
string
-
Concatenates to the
string
the h3
heading element that reads "Add <table> Block"
-
Concatenates to the
string
the opening
<table>
tag
-
Implements the outer
for
loop of the which first
statement concatenates to the string
the opening <tr>
tag and the last statement concatenates to the string
the closing </tr>
tag
-
Within the outer
for
loop, implements the inner for
loop that concatenates to the string
the "Click Me!" td
cell elements with an onclick
event handler that passes the this
reference to the called function
in the <head
> script
(see below)
-
After the nested
for
loop, concatenates to the string
the closing </table>
element
-
Assigns the value of the concatentated
string
to the innerHTML
property of the document.body
element
-
In a <
head
> script that executes when the onclick()
event "fires" (see above regarding the event handler) for any td
element
and updates that element as per the image below:
-
Assign a
string
array literal of 10 CSS color names
(some examples can be seen in the image below, but additional colors
can be found on the Internet) to a "colors" Array
variable
-
Assign an
random
value between zero (0) and 9 to an
"index" variable
-
Use the random "index" to get one of the elements of the "colors"
array and assign its value to the
innerHTML
property
of the "e" parameter as per the image below
-
Also use the random "index" to get one of the elements of the "colors"
array and assign its value to the
backgroundColor
property
of the style
property of the "e" parameter as per the image
below
-
Add an embedded
style
sheet to the <head>
element
of the document to format properties of the table
as follows:
-
Center the
table
by setting values for the
margin-left
, margin-right
and
width
properties
-
For the
table
and td
cell elements,
set a "black solid" border
1 pixel in size and
collapse
the borders
-
For the
td
cell elements, center the text inside
the cells, set the width
of each cell to 25% and
increase the height
of every cell
-
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.