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


This assignment provides continued practice in constructing regular expressions. It also provides a first start at using the DOM to modify page elements dynamically.

Allowed and Disallowed Resources

The guidelines for allowed and disallowed resources are the same as given in homework 5.

Regex Practice (6 pts)

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:

DOM Practice (18 pts)

Make sure that your hw06 directory contains the most recent version of your poemlayout.html and poemlayout.css documents. Then edit them as follows:
  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. The Javascript code that supports updating the clock should be stored in a separate file called poemlayout.js.

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

    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.