Why are we doing this?JavaScript is one of the most useful tools available to the web developer. It is indispensable for creating user interfaces, which minimize the number of mistakes a user can make and thus making it easier to store and retrieve data. It's very important for you to understand when and how to implement JavaScript in your web pages. The lectures will cover the "when" and this assignment will cover the "how" of implementing JavaScript.The AssignmentOverview: Create a user login for a local photographer called Picture Perfect Portraits (PPP) that validates a photographers data and verifies the photographers name, the photographers password and the photographers ID.Task Description: ScenarioSuppose that you have been hired to design the new web based interface for a local photographer, Picture Perfect Portraits (PPP). The interface gives photographers access to their accounts.In order to access PPPs site, a photographer must login with a valid user name, user password, user ID and user phone number. A users email address is also required if the user wants an email confirmation of any transaction (The user will indicate this by checking a box signifying the user wants email confirmation). Develop the login script that first validates and then verifies the user input.Validation makes sure that the photographer has entered all the required data: user name, user password, user ID, user phone number and user email address (if requested). The user password should contain a max of 10 characters and have at least 1 uppercase letter, one special character and one numeric character, the user ID

field should contain an eight-digit number, the user phone number should consist of 10 digits which can be delineated either by spaces or dashes and the email address must contain an @ followed by a period and an email domain that consists of 3 to 5 characters. If the input is invalid then an alert should be issued to the user to correct the particular error in the appropriate box. The alert should be specific regarding what the error is and how it can be corrected. Alerts should be issued one at a time. No new alert should be displayed before the previous issue is rectified. After the alert is issued the user should be brought back to the field that had invalid data entered.Verification checks that the user has an account, i.e., that the user name, user password and user ID match the name, password and ID for one of PPPs photographers. If the input is not verified, alert the user that an account for them cannot be found. Once the input is both validated and verified, alert the user with a simple welcome message that they have entered the system indicating the transaction chosen (Search the Photographers Records, Book a Clients Appointment, Place a Clients Order, Update a Clients Order, Cancel a Clients Appointment, Cancel a Clients Order or Create a Clients Account).Program Design and ImplementationDesign the HTML interface. The interface should have four text fields, (for the photographers name (first and last), the photographers phone number and photographers email address, a password field (for the photographers password), a numeric field (for photographers ID), a checkbox for indicating an email confirmation is requested, a drop-down list allowing the photographer to indicate what type of transaction they wish to perform, and buttons as input elements as shown in the figure below. Be sure to give each input element a unique name attribute.Below is an example to illustrate the HTML form requirements. You must tailor to your own style but make sure the form has all key elements illustrated in my form.

Email confirmation wantedEmail Confirmation not wanted

Dropdown MenuModularize your JavaScript using two functions: validate and verifydescribed below. Your event-driven program should call the validatefunction when the Submit button is clicked. If all the data has been entered correctly, the validate function then calls the verify function. The Reset button will clear all data from the form.Validate Function:INPUT: HTML Form that needs to be validatedPROCESS: Validates that all required information exists and conforms to requirements: Photographer Name (First and Last), Photographer Password, Photographer Phone Number, Photographer ID and Photographer Email Address (if required).Validation MUST take place in your JavaScript. No validation should be done via your element/tag (i.e. patterns, length, ect.).

OUPUT: Alert the user to correct any particular error in the appropriate box if necessaryVerification Function:INPUT: HTML Form with Photographer Name (First and Last), Photographer Password and Photographer IDPROCESS: Compares the form's Photographer Name (First and Last), Photographer Password and Photographer ID with the properties of a photographer object stored in a global array of photographers (for this exercise create an array of 6 photographers). Returns true if it finds the photographer object matches the inputted data.OUPUT: Simple welcome message consisting of the Photographers name and the Transaction chosen from the dropdown menu.Make sure to test you program with a variety of valid and invalid input to ensure that your program is properly validating the data, properly verifying the photographer and that all alerts are working as described. Debugging:Please read over my posting under Week 0 called Web Development Tools. This posting will give you information on how to activate your browsers DevTools that will aid in the debugging process.