This assignment provides continued practice in constructing regular expressions. It
also provides a first start at using the DOM to modify page elements dynamically.
The guidelines for allowed and disallowed resources are the same as given in
homework 5.
Continue the regex practice you started on lab day by adding two functions to
regex.html: 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.
NOTE: As in the lab day exercises you may find it helpful to use
https://regexr.com/ or https://regex101.com/ to help you construct
and test your expressions. Do not access any other sites to complete this
exercise.
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
- followed by the symbol: @
- followed by 1 or more “word characters” (i.e.,
\w)
- followed by a single period
- followed by one or more letters
- no trailing characters are allowed after the match
Make sure that your hw06 directory contains the most recent version of your poemlayout.html
and poemlayout.css documents. Then edit them as follows:
- (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. The
Javascript code that supports updating the clock should be stored in a
separate file called poemlayout.js.
- (14 pts) Add Javascript code to the bottom of poemlayout.html
that will slowly resize the div/section 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.
IMPORTANT: 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. There are hints below.
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.
- Relish your beautiful creation.
Your solutions should be placed in the hw06 folder in your web space.