~ JavaScript Assignment 03 ~

• Objectives
  • Create a password strength checker by applying multiple regular expressions to validate the characteristics of a strong password.
  • Use JavaScript to manipulate the HTML DOM to output feedback to the user.
• JavaScript Assignment 03
  • Download the html file js_asmt03.html. The HTML document contains a password input and a paragraph tag. As the user enters a potential password, feedback regarding the strength of the password will be displayed in the paragraph tag.
    • Right-click the above link > Save Link As...
  • Change the filename to js_Lastname_03.html, where Lastname is your last name.
  • Open js_Lastname_03.html in Atom to make changes and in a browser to view any changes.
  • Underneath the password input, indicated by an HTML comment, add HTML markup for a checkbox input and add the text "Show Password" after the checkbox to let the user know what the checkbox is supposed to do.
    • The checkbox will serve as a way to show the password.
    • Give the checkbox an appropriate id and name. For example, "passwordReveal".
  • At the bottom of the HTML document, indicated by an HTML comment, create a script tag to import an external JavaScript file named js03-Lastname-logic.js, where Lastname is your last name.
  • Save js_Lastname_03.html.
    • That is all you will be doing in the HTML file.
  • Create a new file and save it as js03-Lastname-logic.js, where Lastname is your last name. This JavaScript file will contain all the behaviors for the page.
    • Ensure this file is saved in the same folder as your js_Lastname_03.html file.
  • In js03-Lastname-logic.js you will add a total of 2 events. The first event is for the password input and the second event is for the checkbox. Both events will be added using the addEventListener method.
    1. Add a keyup event to the password input that does the following:
       • Verifies if the password the user typed is a "strong" password and displays feedback to the user in the provided paragraph tag.
         • All feedback is displayed in that paragraph tag that already is in the HTML page.
         • You MUST use the provided

           and are NOT allowed to add or modify the

           in the HTML page.

       • The characteristics of a strong password are as follows:
         1. Contains a lowercase letter.
         2. Contains an uppercase letter.
         3. Contains a special character.
            • A special character is defined as a non-number, non-letter. That is, create a regex pattern that matches a character that is not a number, uppercase letter, lowercase letter.
            • While some website specify a limited set of special characters such as !@#$%, the regex will accept more than those symbols that you see in the top row of your keyboard. For instance, a space or a is a special character.
         4. Contains a number.
         5. At least 6 characters long.
       • Use a combination of regular expressions and the length string property to ensure the password satisfies all the characteristics of a strong password.
       • Provide feedback on ALL characteristics that have not been met. If there are multiple characteristics that have not been met, ensure each feedback appears on its own line in the browser.
         • See the Example Output for the various messages for each characteristic.
       • If all 5 characteristics are met, then the password is considered strong and the feedback should indicate the password is considered strong.
       • If the password input is blank, there should not be any feedback shown.
    2. Add a click event to the checkbox input that does the following:
       • If the checkbox is checked, change the type of the password input to text.
       • If the checkbox is unchecked, change the type to password.
• Extra Credit Documentation
  • (+1.0) In js_Lastname_03.html, provide a description of the HTML page in HTML comments at the top. In js03-Lastname-logic.js, provide a description of the external JavaScript file at the top and all JavaScript code is commented. Please see the "-done" examples from the lectures for sample documentation.
• Example Output
  • Below is an example interaction:
• Hints
  • Use 4 separate regular expressions.
    • Create 4 RegExp objects for characteristics 1 through 4.
  • Verifying if the password satisfies a characteristic is an error case. Create a regex pattern that represents a characteristic, but use the ! when calling the test method. This will check if the password does NOT contain that characteristic.
  • To display all the output in the paragraph, build a string variable that contains all the error messages you want to display to the user, then at the end of all checks, assign the string to innerHTML of the

    . If you do not, you may have an issue where you are overriding existing error messages and only show 1 message at a time.

• Submission Guidelines
  • Submit your js_Lastname_03.html and js03-Lastname-logic.js files to the Digital Dropbox.
    • Be sure to check your hawaii.edu e-mail for confirmation of your submission.
  • Due Date: Tuesday, Mar. 9 by 11:55pm

~ m O 4. js_asmt03.html Password: 6 7 8 10 11 12 --> 13 14. 11 12 --> 13 14.