LD06: JS Regex's and the DOM due Thu 05 Oct 13:20

\begin{purpose}
In this assignment you will:
\begin{itemize}
\item Work with...
...m Use Javascript commands to control CSS settings.
\end{itemize}
\end{purpose}

Preparation for Lab Day

In preparation for lab day go through the 56 mini-lessons of the Regex 101 tutorial found here: https://regexlearn.com/learn. When you reach the final “congratulations” screen, take a screenshot and attach it to the lab day assignment in Canvas.

NOTE: The upcoming lab day is longer than most. If you don't complete all the steps before the end of lab time, you'll still credit credit for lab day. HOWEVER, you need to complete all remaining steps on your own (ASAP) since they will be needed in order to start on the homework assignment. Also, if you'd like to start the lab day early feel free to do so.

On Lab Day

  1. NOTE: As you play around with regex's feel free to use https://regexr.com/ or https://regex101.com/ to help you construct and test your expressions.
  2. In your repository create a directory named hw06 and work in it.
  3. Copy the document https://josephus.hsutx.edu/classes/w1/source/regex.html into hw06.
  4. Visit the page and verify that the Javascript code is running properly.
  5. View the source of the page in your editor and decipher the regular expression used to match the IP number. Once you feel you understand how the existing code works, read and follow the instructions in the Javascript comment section.
  6. Modify your regex.html document by adding a new function called isValidPhoneNumber that will return true if the parameter passed to it is a valid phone number and will return false if it is not. Let's say a valid phone number fits one of these patterns: (xxx)xxx-xxxx, (xxx) xxx-xxxx, xxx-xxx-xxxx, or xxx-xxxx.
  7. Write a testPhoneNumber() function and then call it with a variety of phone numbers.
  8. Once you feel you have a good regex, find one or two other folks who are finishing this step at about the same time you are and have them look at your code and offer suggestions of patterns that may produce false positives or false negatives. Do the same for them.
  9. Copy the document https://josephus.hsutx.edu/classes/w1/source/clock.html into hw06.
  10. Take time to view the code. Note the use of getElementById and innerHTML to manipulate the contents of the page with a dynamic value calculated by the Javascript program.
  11. Put the three lines of Javascript code that get the time and display the time on the page into a separate function called displayTime.
  12. Call the new displayTime method to verify it is working. Then, modify displayTime so that it updates the span tag with only the time portion of the date string. HINT: The Javascript const matches= str.match(regex) function can take a regular expression and will return matching segments in an array.
  13. In the head of the document add CSS commands to style the time string so that it has a nice background, border, font, etc.
  14. Read briefly about the Javascript setInterval command and then use it to call your displayTime function once per second so it provides a running time.
  15. Show your work to the instructor. If you finish early you can start work on the homework assignment.