Sergeant's Website

Web I

Continue the regex practice you started on lab day by adding two functions to
your regex.js: isValidEmail and testEmail(). Use the same
conventions we applied on labday for the structure of those functions. In your
regex.html document provide 10 tests that you feel test the edges of
your regular expression. How well your 10 test cases are selected is part of
your grade for this part of the assignment.

Matching valid email addresses with a regular expression is notoriously
difficult. Rather than making a truly accurate matcher use the following
rules for the purpose of this assignment:

it must begin with a letter followed by 0 or more letters,
digits, periods, or underscores

Copy your homework files for the responsive page from hw04 to hw06.
Make the following changes to the page:

(4 pts) Add the animated clock you created on lab day to the upper right corner
of your page. Style it to fit with your page's design.

(14 pts) Add Javascript code to the bottom of of your responsive page that will
slowly resize the div containing lorem ipsum until it's height is zero.
Then halt the animation and set the div's display property to none. You
will want to put an id on that div so you can easily select it in your
Javascript code.

It goes without saying that you should not do a web search for
how to resize an elements until it disappears. Remember, you need to
use what you know to figure this out. The remaining steps should all be
done using Javascript commands:

Once you have a pointer to the div you want to make sure you can
manipulate it. Try something simple, like changing it's background
color from Javascript.

You'll need to determine the div's current height. That value is
available regardless of whether you have previously set the height
property in CSS by using its .offsetHeight property. Retrieve
the height and display it in an alert box to verify it is valid.

You cannot directly modify the .offsetHeight property from
Javascript, but you can modify the element's CSS height property.
So, start by setting the CSS height value to the number of pixels
returned from .offsetHeight.

Now subtract 100 pixels or so from that value and set the height
to that much smaller number. You should see that the divs under it
have been raised and are sitting over some of the text in the
div you are trying to shrink.

To address that issue you need to set the div's overflow property
to be hidden. Do that from Javascript and verify that the shrunken
div is now clipped.

Use the setInterval command to run a function every 10th of
a second that will subtract a few pixels from the height of the div
and then update it's CSS height property accordingly.

Modify the function you passed to setInterval so that when
the height of the object gets down to zero you call clearInterval
(to stop the script) and then set the div's display property to none.