CST295: Web Programming with JavaScript
Project 8: Chapter 19
-
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. 8"
-
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 "Dropdown Menus" 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:
-
Three
button elements that implement the three
select "DropDownList" blocks for this application
that will be associated with jQuery click event
handlers in the <head> element
as defined below
-
Three
div elements each with a select
"DropDownList" block that contains rollover "anchor" <a>
menus with links to five or more websites of the following
(the "linked to" web pages should open in new tabs within
the browser window):
-
Search engines (five or more of your own choosing,
for example "Google", etc.)
-
Long Island College Homepages (five or more as per the
possible suggestions in the image below)
-
Technology Companies (five or more of your own choosing,
for example "Microsoft", etc.)
-
Remove all underlining from the "anchor"
<a>
elements and add additional CSS formatting of HTML elements
as per your own design
-
In a <
head> script, create jQuery click
event handlers for the three button elements that
slideToggle the div blocks down
into view and back up out of view
-
The Part 2 web document "CSS Formatting of a Date Object"
application that applies the jQuery
css() method to a paragraph
<p> that displays a Date object:
-
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:
below that includes:
-
A paragraph
<p> element that displays the
system date from a Date object as per the image
below; the jQuery code that initializes the text
for this paragraph should appear within the "document ready
event" before the click
event handler for the "Format" button
-
Four
select 'DropDownList' blocks with
option elements and associated label
elements as follows:
-
A dropdown list of
option elements with
at least five CSS font-family names including
value attributes that specify the "font family"
-
A dropdown list of
option elements with
at least five CSS color names including
value attributes that specify the "color"
-
A dropdown list of
option elements with
at least five CSS background-color names including
value attributes that specify the "background color"
-
A dropdown list of
option elements with
at least five CSS font-size values measured
in points including
value attributes that specify each "font size",
e.g. for the 12-point font size use the string "12pt"
-
A
button element that implements the CSS formatting
for this application that will be associated with the jQuery
click event handler in the <head>
element as defined below
-
In a <
head> script, create a jQuery click
event handler for the button element:
-
Using the jQuery
val() method, get the values
of the four select 'DropDownList' elements
-
Use the jQuery
css() method to apply CSS
formatting from the values of the dropdown lists to the "Date"
paragraph <p> element (this can be accomplished
either in four separate statements or combined into a single
statement either with chaining or the alternate format of
the css() method)
-
The Part 3 web document "CST295 Fall 2019 Course Outline" application
that uses AJAX functionality to load the various sections from another web document
into this one:
-
In the
section block of the <body>
element, create an HTML document similar to the one in the image
below that includes:
-
Six
input 'radio' buttons for the six sections
of the "CST295 Fall 2019 Course Outline with associated
label elements that will be associated with
jQuery click event handlers in the <head>
element as defined below; apply CSS formatting to the block
that contains the radio buttons as per your own design
-
Below the radio buttons insert a
<section>
block (see notation in the image below) to hold the sections
that will be loaded from the course outline
-
Open and save the
CST295 Fall 2019 Course Outline
from the previous link and add
id attributes to the six
section blocks of the outline
-
In a <
head> script, create a jQuery click
event handler for each of the input 'radio' button
elements:
-
Using the jQuery
load() method, load the matching
section from the downloaded course outline into
the section just below the radio buttons as per
the image below (in this example the "Assignments and "Exams"
button just has been clicked)
-
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.