Create a Home Page:

Part 1

• Contain an image or logo about yourwebsite.

• Must contain three navigation links. Home link.Registration link. Animations link.

• Footer will contain links to web pages to any othersite you wish (just be outside your webpage, like YouTube,etc.)Open links in new tab, not current tab.

Create a Registration page:

• Registration Fields:

1) User Name - Input Text

2) Password - Input Password

3) Repeat Password - Input Password

4) First Name - Input Text

5) Last Name - Input Text

6) Address line 1 - Input Text

7) Address line 2 - Input Text

8) City - Input Text

9) State - Drop Down of Options

10) Zip Code - Input Text

11) Phone Number - Input Text

12) Email - Input Text

13) Gender - Radio buttons

14) Marital Status - Radio buttons

15) Date of Birth - Input Text, must have a calendarpop up (date picker)

16) Submit Button - Form submit button

17) Reset Button - Clears form fields to defaultsettings (normally empty)

Create an Animation page:

• Use CSS3 animations to make an animation thatmatches your web site theme.

Part 2

• Add client side HTML5 and JavaScript form validationfor user input

• Validation Rules for Registration Fields (do notchange the input types from Project 1, these validation characterlengths are going to be the database column sizes, so forradio/drop down options, just do not give the user a valueunder/over the limit):
1) User Name

a. Required Field

b. Max length 50 characters, minimum length 6characters

2) Password

a. Required Field

b. Max length 50 characters, minimum length 8characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 specialcharacter

3) Repeat Password

a. Required Field

b. Max length 50 characters, minimum length 8characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 specialcharacter

d. Ensure password fields match

4) First Name

a. Required Field

b. Max length 50 characters

5) Last Name

a. Required Field

b. Max length 50 characters

6) Address line 1

a. Required Field

b. Max length 100 characters

7) Address line 2

a. Optional Field

b. Max length 100 characters

8) City

a. Required Field

b. Max length 50 characters

9) State

a. Required Field

b. Max length 52 characters

10) Zip Code

a. Required Field

b. Max length 10 characters, minimum length 5digits

c. Use jQuery/JavaScript to dynamically adjust userinput to match either xxxxx or xxxxx-xxxx format (this should bedone either as the user is typing or after leaving thefield)

11) Phone Number

a. Required Field

b. Max length 12 characters

c. Use jQuery/JavaScript to dynamically adjust userinput to match xxx-xxx-xxxx (this should be done either as the useris typing or after leaving the field)
format

12) Email

a. Required Field

b. Email format, [email protected] format, where x is aplaceholder for valid alphanumeric characters

13) Gender

a. Required Field

b. Max length 50 characters

14) Marital Status

a. Required Field

b. Max length 50 characters

15) Date of Birth

a. Required Field

b. MM/dd/yyyy format

16) Submit Button

a. Submits valid user data only

17) Reset Button

a. Resets all fields to default value (empty, for mostfields)

----------------------------------------------------------------------------------------------------

• When validating user input with JavaScript. Checkall user input fields.

o All valid user inputs are marked green with someicon or messaging indicating good
input.
o All invalid user inputs are marked red with some icon ormessaging indicating bad input.

o Make sure all valid user data is submitted to theserver

----------------------------------------------------------------------------------------------------