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.

Bootstrap MAY NOT be used for any projects in this course

The Assignment

Overview: Using the user login form you created for a local Pet Hotel called Happy Tails Hotel (HTH) you will enhance it so that validates a receptionists data and verifies the receptionists name, the receptionists password, the receptionists ID and the receptionists email (only if confirmation requested).

Task Description: Scenario

In order to access THTs site, a receptionist must login with a valid username, user password, user ID and user phone number. A users email address is also required only 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 using JavaScript that first validates and then verifies the user input.

Validation ensure that the receptionist has entered all the required data: user name, user password, user ID, user phone number and user email address (if confirmation requested). The user password should contain a max of 14 characters and have at least 1 uppercase letter, one special character and one numeric character, the user ID field should contain a 6-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 6 characters. If the input is invalid, 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 MUST be issued one at a time (meaning only a single error appears in the alert). 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 so it can be re-entered.

Verification checks that the receptionist has an account, i.e., that the user name, user password, user ID and user email (if confirmation requested) match the name, password, ID and email (if confirmation requested ) for one of THTs receptionist. If the input is not verified, alert the user that an account for them cannot be found. The alert should contain a message indicating the name of receptionist (first and last) and that they 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 receptionists name (first and last) and the transaction chosen (Book A Stay, Cancel A Stay, Request Additional Perks During A Stay, Cancel Additional Perks, Update Perks, or Create A New Client Account.).

Program Design and Implementation

The design for the HTML interface was developed in Assignment 1. It consisted of the following fields: receptionists name (first and last), receptionists password, receptionists ID, receptionists phone number, receptionists email address, a checkbox for indicating an email confirmation is requested, a drop-down list allowing the receptionist to indicate what type of transaction they wish to perform, and buttons as input elements.

Modularize your JavaScript using two functions: validate and verify described below. Your event-driven program should call the validate function when the Submit button on your form 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 validated

PROCESS: Validates that all required information exists and conforms to requirements: Receptionists Name (First and Last), Receptionists Password, Receptionists Phone Number, Receptionists ID and Receptionists Email Address (ONLY if required).

Validation MUST take place in your JavaScript via REGEX for patterns. No validation should be done via your element/tag attribute(s) (i.e., patterns, length, number, email, etc.).

Your JavaScript should be coded in a separate file and linked to your HTML code.

OUPUT: Alert the user to correct any particular error in the appropriate box if necessary

Verification Function:

INPUT: HTML Form with Receptionists Name (First and Last), Receptionists Password, Receptionists ID and Receptionists email (if confirmation requested).

PROCESS: Compares the form's Receptionists Name (First and Last), Receptionists Password, Receptionists ID and Receptionists Email (if confirmation requested) with the properties of a receptionist object stored in a global array of receptionists (for this exercise create an array of 10 receptionists). Returns true if it finds the receptionist object matches the inputted data.

OUPUT: Simple welcome message consisting of the Receptionists name (first and last) and the Transaction chosen from the dropdown menu or message indicating that the specific receptionist cannot be found.

ABOVE IS THE ASSIGNMENT

BELOW IS MY HTML CODE. KINDLY ASSIT ME WITH THE JAVASCRIPT CODE FOR THE ABOVE QUESTIONS TO BE ABLE TO MAKE IT WORK WITH MY HTML CODE

I DONOT WANT ANY ALREADY WRITTEN CODE. PLEASE USE MY HTML CODE TO HELP ME WITH THE JAVASCRIPT CODE TO MY PROBLEM.

TY

Happy Tails Hotel Login

Receptionist First Name: REQUIRED

Receptionist Last Name: REQUIRED

Receptionist Phone: REQUIRED

Receptionist Email:

Receptionist Password: REQUIRED

Receptionist ID: REQUIRED

Send Confirmation Email:

Transaction Type: --Please choose an option-- Book A Stay Cancel A Stay Request Additional Perks During A Stay Cancel Additional Perks Update Perks Create A New Client Account