|
CSE-2041A
Net-Centric Computing
York University
Fall 2011
|
Lab #6: Client-side
CSS & JS Practise
|
|
|
|
Welcome
to lab #6.
Today is for exploring CSS and JS.
|
|
|
|
Download
the HTML file
StairSteps.html.
Create the file StairSteps.css
so that the HTML page will produce the stairstep effect shown in the
following picture.
-
The right sides of all the steps should line up
in the middle of the document,
regardless of the width of the browser window.
-
Each step must have the same height
—
about 3em
—
as all other steps,
regardless of the number of lines of text in it.
-
Your CSS must generate the desired effect,
even if the text contents of the various DIV tags were to change.
You may not make any changes
to the content of the HTML file.
|
|
|
|
Download
the HTML file
WrappedSidebar.html.
Create the file WrappedSidebar.css
so that the HTML page will be rendered as follows.
-
The sidebar is on the left side of the page,
while the content is wrapped around it.
That is, the two <div> 's are displayed
side by side at the top of the canvas,
but when the bottom of the sidebar is reached,
the content area should extend across the entire width
of the browser client area.
-
The background colour of the sidebar is grey
—
decimal 221 for each of the three basic colours
—
while the background color of the content area is a light grey
—
decimal 236.
-
The sidebar has a solid border with a dark blue colour
—
#002060
—
and its border is separated from the text of the content area
by 1em from the right, and
1em from the bottom.
-
The list elements in the sidebar have no bullet,
no indentation, and
are 1em from the border.
-
The hyperlinks in the sidebar are displayed bold in dark blue,
without the usual underline.
When the mouse hovers on any of them, however,
they appear in white on a dark blue background.
Note, in particular, that the hover effect spans the entire width
of the list item,
not just the text of the link;
that is, it is as if the <a> tag
were a block rather than an inline tag.
-
Use the sans-serif font family for the content area,
and the default for the sidebar.
Again, you may not make any changes
to the content of the HTML file.
|
|
|
|
Take
W3School's
JavaScript Tutorial.
This, and the textbook,
will provide you with the information you need for the following task.
Download the HTML file
PBclient.html.
Create the file PBclient.js
so that the HTML page will behave as follows.
-
Upon loading,
the current time is displayed as shown
in the “time” span.
The format is hh:mm:ss
—
with a leading zero in any field if its value is fewer
than two digits otherwise.
-
The time should continue updating itself every second.
(Hint: use the setTimout method.)
-
If the form is submitted with a blank name,
a message should appear in a third column of the table,
saying, “Please enter a name.”
(You may wish to create this column
—
and give it an ID in init()
—
in the base HTML file.)
-
If the user did enter a non-blank name
and then pressed ENTER, TAB, or clicked elsewhere,
the entry should be tranformed into all capitals.
(For instance, “Godfrey” to “GODFREY”.)
And if there is any error message appearing in the third column,
it should be removed at this point.
-
The telephone value must also be validated, upon submission.
If it is in one of the following three formats
(123) 456-7890
(123)456-7890
123-456-7890
then it is accepted and automatically converted to
1234567890
Otherwise,
it is rejected, and
an alert is used to show an error message.
In this case,
the entry must be highlighted and given the focus.
You may make small changes to the base HTML file,
if this makes the job easier.
|
|
|
|
Submit
your StairSteps.css file.
submit 2041 lab6 StairSteps.css
Remember,
your StairSteps.css
should work having made
no changes to
StairSteps.html .
|
|
|
|