BTI225 A5

Objective:

practice HTML5, CSS3, JavaScript, and client-side validation.

Specifications:

This assignment is built upon Assignment 3 and Assignment 4. If you are unable to start this assignment because Assignment 3 or Assignment 4 were incomplete - email me for a clean version of the Assignment 3 or A4 to start with.

In this assignment, you will practice the fundamental technologies in web design and development, using HTML5, CSS3, and JavaScript for client-side validation.

You are going to create a webpage (registration.html) based on the following specifications and link it to the website you worked on from Assignment 3.

Design your page (registration.html) using external CSS (main.css). Taking the advantage of external CSS, it will be easy to adapt main.css to multiple pages in the future (for simplicity, we only work on one page registration.html for this assignment). Name the external CSS as main.css and place it under folder "css" of Assignement 3 work space). Absolutely, you are still allowed to use internal and/or inline CSS based on your design. The layout of (registration.html) should be like Figure 1 as follows.

Figure 1 Layout for webpage (registration.html) see image.

Figure 1 is abstract schematics. Detailed specification is as follows. You can freely choose other proper features that were not specified.

1) This page (registration.html) will be linked to the website you worked on Assignment 3. Details will be in the following section "Getting Started".

2) The specific height and width of each panel is for you to define.

3) the page should have a background of some color;

4) the text of the header and footer should be in a different color than the rest of the panels.

5) For simplicity, assume that the desktop screen width is fixed and set at 1200px. Ideally there should not be any horizontal scrolling.

6) Title for the page: Registration-your name.

7) Header section contains your name and a logo of your choice.

8) The navigation panel includes links to other pages of the website, e.g. Home, Lists, Tables, images, etc. that were defined in Assignment 3 and Assignment 4.

9) Footer section includes copy right.

10) Right side panel contains a small email image followed with your email. You can look for a royalty-free email image, e.g., name it: email.gif. Store it under subfolder "img". Refer to File structure section below.

Getting Started

• In Assignment 3 work space, locate the "css" directory and add/create the file "main.css".
• Using Visual Studio Code or other editor, create file "registration.html". Add the < link> tag to include main.css file.
• Open "index.html", in the < nav> < div> < ul> section, in the end before < li> . Honesty < /li>, add a new list item < li>. Its content/text is Registration, click this text, it will open the registration.html page. Details about registration.html are as follows.
• The updated screenshot as follows, see image.

Page (registration.html ) requirements:

Structure this page as above Figure 1. The "body" section in Figure 1 includes a form. Try your 3 best to organize and style the form in a nice way. The appearance will be evaluated. The form fields are listed as follows and more specifications follow in the section of Client-side Validation. You can choose proper attributes for each field if not specified. Validation rules are specified afterwards.

1) First Name
2) Last name
3) User name
4) Password.
5) Second password, to confirm password match.
6) Phone Number
7) E-mail
8) Street number and street name
9) City
10) Province
11) Postal Code
12) Submit button,
13) Reset button

Client-side validation is implemented in external JavaScript file (registration.js) in folder "js". The validation rules are as follows:

• All fields are mandatory (/required).
• Last Name: Hidden field. No validation.

< input type="hidden" name="lastName" id="lastName" value="Your last name goes here" />

• First Name: Hidden field. No validation. (refer to the above code example for "last name")
• Username: username must start with a letter, have at least 6 characters.
• Passwords (both): must be at least 8 characters long, start with a character, haveat least 1 digit and 1 uppercase. The two passwords must match.
• Phone Number: must be 10 digits, hyphen in the 4th and 8th position, format: xxx-xxx-xxxx, for example 111-111-1111.
• Email: use html5 input type for default validation
• Street name and number: text, no further validation
• City: must contain letters only.
• Province: must be selected from a drop-down list of displayed Canadian provinces. Define ONTARIO as default selection. No further validation is required.
• Postal Code: 6 characters in Canadian Postal code format, with space in between (Letter Digit Letter Digit Letter Digit), e.g., C1A 1A7.

Important:

• Only when no validation errors, the form (user's input) will be submitted to https://httpbin.org/post using the POST method.
• Though HTML5 validation is not banned, you are expected/ required to use JavaScript for most of the following validation except the cases that are explicitly specified with HTML5, e.g. emails and required.
• If there are validation errors, do NOT submit the form. Instead, display meaningful error messages in the following ways ("meaningful" is very important). The error messages are supposed to help users to correct the errors and input correctly. This is what I meant meaningful. Something like please match the requested format (by HTML5 validation) is not considered meaningful, because user may have no idea about what's the requested format. Instead, your meaningful error message may specify something like: Please input phone number in the format of NNN-NNN-NNNN.
• You can use either of the following two options to displaying error messages.
  • Display the error messages when the user clicks the "submit" button OR
  • Display the error messages immediately when the field has been changed. Hint: use the onchange or onfocusout etc. event handler to call JavaScript functions. Show only one error for a field, at a time.

Note:

• Using either way described above, errors should be displayed beside or beneath the error fields (based on your design) in red. The error field will be highlighted with red box. This is explained and demonstrated in class.
• Do not use alert() to display error messages.

File Structure:

The following screenshot is the current file structure, which includes the files and folders from A3 and A4. You may not have everything in the screenshot. This screenshot is to show you the file structure with the newly added files: main.css, registration.html, registration.js, email.gif.

Browser Issues:

You should test your complete site with at least Firefox and Chrome. You may display a note in the registration page which browsers your site works the best. It's wise to test with different display settings/screen resolutions.

Other Requirements

Your HTML & CSS must be well-formatted and properly commented where appropriate.

Your code will be evaluated for correctness of syntax and appropriate usage.

Validate HTML: https://validator.w3.org/

Validate CSS: https://jigsaw.w3.org/css-validator

All JavaScript code must not contain any run-time errors/exceptions.