CS-90.3 Assignment 6

Construct this assignment by modifying the code from Assignment 5. You do not need any new files for this assignment.

Set up form handlers for email change events and password keyup events.

Use console.log() to verify that the event listener for email change events is being called each time you change the value of the email field and each time you type (or erase) a character in the password field.

Also, have your init() function initialize application-global variables with references to the two status messages.
Set up CSS rules for the status messages.

The email status message can be in one of three states: missing, invalid, or valid. The password status message can be in one of four states: missing, weak, medium, or strong. Set up four CSS rules for classes named missing, invalid, weak, medium, and good. Use different background colors and text colors to make all four states easy to differentiate and meaningful. For example, missing might have a red background and good might have a green background. Be sure to pick combinations of background color and text color so that the text always is easy to read. You won’t actually get to see the effects of these classes yet, so you may have to go back and adjust them after you have completed the next step.
Use JavaScript to change status messages based on the contents of the email field.

When the email change listener is called, use a regular expression to test whether the value the user has entered is a valid email address or not. You can use the email regular expression from the textbook, but I will be looking at your code to see if you have implemented something more accurate. You do not need a regular expression to test if the field is empty: just compare it to an empty string.

Using nested if statements to decide which state the email value is in (missing, invalid, or invalid), use setAttribute() function to set the class of the email status message to “missing,” “invalid,” or good. With this working, you can fine-tune your CSS rules to get good color (text) and background color values for those threee states.

To change the word in the status message, the code is something like this (depending on what name you used for the application-global variable that refers to the email status message):

email_status.firstChild.nodeValue = 'Missing';

Be sure you can change to all three states from any other state by changing the value you type into the email input field.
Update the password status message as the user types.

Code the event listener for keyup events so that it uses regular expressions to test for weak, medium, or strong passwords. Again, you do not need a regular expression to test for a missing password. Sart with simple tests: 1 to 3 characters is weak, 4 to 7 characters is medium, and 8 or more characters is strong.

Change the class and text content of the password status message based on the results of the various tests you perform on the value of the password field. Verify that the status message changes as enter and delete characters in the password field.

Optional: Design a more stringent set of rules for password strength. For example, you might require medium passwords to include one or more numbers as well as other characters, and you might require strong passwords to include upper and lower case letters as well as at least one number and one punctuation character. Just don’t make it too hard for me to figure out what the rules are!
Have the submit listener decide whether to submit the form or not.

Code the form’s submit listener so that it calls preventDefault() unless the password is strong and the email is valid.

CS-90.3 Assignment 6

Summary

The Assignment

Set up form handlers for email change events and password keyup events.

Set up CSS rules for the status messages.

Use JavaScript to change status messages based on the contents of the email field.

Update the password status message as the user types.

Have the submit listener decide whether to submit the form or not.

Submit The Assignment