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.

1. The right sides of all the steps should line up in the middle of the document, regardless of the width of the browser window.

2. Each step must have the same height — about 3em — as all other steps, regardless of the number of lines of text in it.

3. 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.

1. 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.

2. 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.

3. 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.

4. The list elements in the sidebar have no bullet, no indentation, and are 1em from the border.

5. 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.

6. 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.

1. 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.

2. The time should continue updating itself every second. (Hint: use the setTimout method.)

3. 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.)

4. 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.

5. 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.