This assignment provides continued practice in constructing regular expressions. It
also provides a first start at using the DOM to modify page elements dynamically.
In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.
- Doing the right thing matters.
- Doing the right thing means developing competence.
- Doing the right thing means living in community.
- Doing the right thing means finding moral, effective, and correct solutions.
- Doing the right thing means honoring God in all we do.
So, do this assignment in a way that demonstrates integrity, develops
competence, is correct, and honors God ... because what we do matters!
In completing this assignment you MAY use/access the following resources:
- The quick reference guides below (which include the printed guides
handed out in class):
- VSCode Editor in its configuration as provided in the course repo. You may use the
extensions that were suggested when you first launched VS Code in the repo directory.
- The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NvzTydQUHc8_-bX2oH1hyzSbFMYByCsp/edit?usp=sharing&ouid=102845346193600525432&rtpof=true&sd=true
- Your own course notes
- Your instructor
- Discussions about the assignment with other students as long as you
never look at the working code of another student. Another student should
never tell you what to type and you should never tell another student what
to type.
- Websites that provide general instruction on HTML and CSS as long as they are
not targeted specifically to the assignment on which you are working. As an
example, if you want to learn about techniques for applying a color scheme
to a web site, this is a good thing to look up. If you are looking for a
solution to a specific Javascript programming exercise given in a homework
assignment, that is NOT something you should look up. REMEMBER: The goal is
for you to become proficient, so you need to figure some things out.
- Examples provided at: https://josephus.sergeantservices.com/classes/w1/source/
You may NOT use/access:
- Resources not expressly listed above, including, but not limited to,
the following ...
- Code-producing extensions to VSCode that are beyond the default
configuration (such as code completion, CoPilot, or other AI-enabled extensions).
- Code produced by code-generating tools of any kind (ChatGPT as one example).
- Code produced by other people (including classmates) that is targeted
to solve the specific assignment you are working on.
Failure to abide by these guidelines will result in a zero for the assignment
and the incident will be reported to the university provost as a violation of
the university academic integrity policy. A second incident of academic
dishonesty (whether from this course or another computer science course) will
result in an F in the course.
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
assignment and you should not ever look a solution to any of these exercises
regardless of the source.
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.