CST295: Web Programming with JavaScript
Project 3: Chapter 6
-
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. 3"
-
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, aside 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 (4) web pages in the website
and incorporates a "rollover" effect of your own choice
-
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 "Create a Payee" includes:
-
In a <
head> script:
-
Create an object payee with:
-
properties hours and
rate
-
a function getGrossPay that
returns a "payee" object's gross pay with or without
overtime based upon hours worked, either 40 hours or
less, or over 40 hours with "time-and-a-half" for overtime
-
Place the payee object definition
inside a function createPayee
with parameters for the two properties
-
In the
section block of the <body>
element write a script that:
-
Prompts the user to input "number of hours worked" and
parses the user input to a float
-
Prompts the user to input "rate of pay" and
parses the user input to a float
-
Instantiates an object from the payee
object
-
Writes to the document window the values for the
hours and rate
properties of the payee object,
along with the return value from its getGrossPay
function as per the image below
-
The Part 2 web document "Create a Stock" includes:
-
In a <
head> script:
-
Create an object stock with:
-
properties name, symbol,
previousClosingPrice and
currentPrice
-
a function getStock that
returns all properties and descriptive labels (numerics
rounded to 2 decimals)
-
a function getPercentChange
that calculates the difference of currentPrice minus
previousClosingPrice divided by previousClosingPrice
times 100 (rounded to 2 decimals)
-
Place the stock object definition
inside a function createStock
with parameters for the four properties
-
In the
section block of the <body>
element write a script that:
-
Instantiates two objects from the payee
object
-
Writes to the document window the return values from
the getStock and
getPrecentChange functions
for the two objects instantiated from the stock
object as per the image below
-
The Part 3 web document "Create a Cup of Coffee" includes:
-
In a <
head> script:
-
Create an object cupOfCoffee with:
-
properties coffeeType
(assign a default value of "Regular"),
ounces (assign a default
value of 8) and
temperature (assign a
default value of 160)
-
a "setter" method setCoffeeType
for the coffeeType
property that takes a parameter to update the
property (no
if processing is required)
-
a "setter" method setOunces
for the ounces
property that takes a parameter to update the
property (no
if processing is required)
-
a "setter" method setTemperature
for the temperature
property that takes a parameter to update the
property (no
if processing is required)
-
Place the cupOfCoffee object
definition inside a "no-parameter" function
createCupOfCoffee
-
In the
section block of the <body>
element write a script that:
-
Instantiates an object from the cupOfCoffee
object
-
Enumerates through the properties of the
cupOfCoffee object and writes
to the document window the name
and value of each property
as per the image below,
but only for "defined" properties, e.g.:
if (index !== "setCoffeeType" &&
index !== "setOunces" &&
index !== "setTemperature")
-
Updates the values of the properties of the
cupOfCoffee object by calling
the three "setter" methods
-
Again enumerates through the properties of the
cupOfCoffee object and
writes to the document window the name
and value of each "defined"
property as per the image below (since this process
is a repetition of step #2, you might consider placing
this functionality in a separate function inside the
<
head> script and just call it
twice from this script in the section
block of the <body> element)
-
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.