WEB222 Assignment 6

WEB222 Assignment 6
Objective
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
Academic Policy. No part of this assignment has been copied manually or
electronically from any other source (including web sites) except for the
information supplied by the WEB222 instructor and / or made available in this
assignment for my use.
I also declare that no part of this assignment has been distributed to other
students.
Name: Type your name here
Dated: Type the submission date 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
Diploma, College Diploma, Bachelor's Degree, Master's Degree and Others.
The option tag for "- select -" should have a value of "0" or an empty string.
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.
K. You should use pattern matching wherever possible to make JavaScript code
efficient. You may want to use “required" attribute as necessary. If there is no
error found, then a success alert is displayed and form is submitted to
https://httpbin.org/post.
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.
(5) Browser issues: you should test your complete site with at least FX and Chrome.
You may display a note in the welcome page which 2 browsers (with versions)
your site works the best. Think of client’s convenience. Its 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.
• 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 )
d) NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be
accepted and will receive a grade of zero (0).
e) After the end (11:00PM) on the due date, the assignment submission link on the
Blackboard will no longer be available.