JS: Regex and DOM due Tue 10 Oct 13:20

\begin{purpose}
This assignment provides continued practice in constructing reg...
...first start at using the DOM to modify page elements dynamically.
\end{purpose}

Regex Practice (6 pts)

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:

DOM Practice (18 pts)

Copy your homework files for the responsive page from hw04 to hw06. Make the following changes to the page:
  1. (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.
  2. (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:

    1. 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.
    2. 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.
    3. 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.
    4. 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.
    5. 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.
    6. 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.
    7. 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.
    8. Relish your beautiful creation.

Your solutions should be placed in the hw06 folder in your web space.

Quick Links