Description

This assignment will expose you to the following web technologies: HTML5, CSS(3) and JavaScript.

Description
Your task is to develop a few HTML5 web pages with style sheets and JavaScript. This assignment must be your own work. Figure 1 shows how your pages should render on the desktop.

Figure 1 Layout for all pages

The specific height and width of each panel is for you to define; the provided figure is abstract schematics meant to illustrate the general layout of the pages. Your page, however, should have the following formatting: all panels should have a border; the page should have a background of some color; the text of the header and footer should be in a different color than the rest of the panels. The side panel is optional depending on your design/requirement (mandatory for info page). For simplicity, assume that the desktop screen width is fixed and set at 1100px. Ideally there should not be any horizontal scrolling. The navigation must have links to all other pages with the currently visited page as active link. The header should contain a logo and name of your choice.

Page requirements:
(1) Welcome page (honesty.html): this page is the starting page of your online store. You must understand and add the following content with your full name in the body section.
“I declare that my assignment is wholly my own work in accordance with Seneca
I also declare that no part of this assignment has been distributed to other students.
Name: Type your name here

(2) User info page (info.html): this html page will allow a user to fill out his/her information such as first name, last name, password etc. The page must have password field appearing twice: to confirm password match. In addition, this html page will have a submit button, a reset button and must support JavaScript validation. The validation requirement is provide below:

A. You must make all fields mandatory to insert for users.
B. First name: Must start with a cap and only alphabet allowed.
C. Last name: Must start with a cap and only alphabet allowed.
D. Password: must be 6 characters long, must start with a character, must have at least 1 digit and 1 uppercase. The password strings must match. Pattern attribute is not allowed for this field.
E. Username: username must start with a letter, must have at least 6 characters. Pattern attribute is not allowed for this field.
F. Education Level: Dropdown list: select and option elements, required. The
Education Level list should contain the following items: – select -, Technical
G. Education Status: Type of radio. The value should choose from one of the following: Graduated, Current enrolled, Did not graduate. H. Email: use html5 input type for default validation.
I Age: must be in between 18-60.
J The name of the form must be “signup” to accept user’s input for creating user account. This form must submit to https://httpbin.org/post using the post method only when the form does not contain any validation errors. You have two options for displaying error messages-
(a) Display appropriate messages in side panel only for each error when the user clicks the submit button. There should not be more than 8 error messages in total for each display. OR
(b) Your code should validate the field immediately after it has been changed (if applicable) (hint: use the onchange or onfocusout etc. event handler to call JavaScript functions). Show only one error for a field, at a time. Appropriate messages must be shown for the invalid field in side panel only.

L This page must have two hidden fields: one with your last name as value and lastName as field name/id and the other with your Seneca student id as value and studentId as field name/id. Failure to have this hidden field with appropriate property/value will result in zero mark for this page. Example is given below:

<input type=”hidden” name=”lastName” id=”lastName” value=”Your last name goes here” />
<input type=”hidden” name=”studentId” id=”studentId” value=”Your student Id goes here” />

(3) CSS and JS: you must have external css file called normalize.css that you will apply to html pages for presentation/layout. You will be evaluated based on creativity. You must have separate script files as necessary. All css and script must go into the external css and Js file. The name of the files must correspond to the names of the html pages (except the welcome page). Following illustrates the directory structure of your assignment 6. The indentation reflects the location of the files. You must abide by the naming of the following structure (all are lower case).

Assignment6  folder honesty.html normalize.css
info.html
info.js

(4) Title of each page: the title tag of each page in the head section must have your last name. Failure to do so will result in mark deduction.

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.
• Each HTML page must pass the W3C’s HTML Validation: https://validator.w3.org/
• All CSS used in the assignment must pass the W3C CSS Validation:
https://jigsaw.w3.org/css-validator
• All JavaScript code must not contain any run-time errors/exceptions.

Final Submission Guidelines:
a) Zip all of your files as Assignment6.zip
b) Upload the zip file to My.Seneca under Assignments -> Assignment 6 (same submission procedure as all previous assignments)
c) IMPORTANT: All HTML & CSS Must not contain any errors when validated
(HTML: https://validator.w3.org/, CSS: https://jigsaw.w3.org/css-validator )