Description
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 registration page). For simplicity, assume
that the desktop screen width is fixed and set at 1200px. 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 (index.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 registration page (registration.html): this html page will allow a user to fill
out his/her information such as first name, last name, shipping address (including
unit#, street #, street name, city, province, postal code), phone#, email,
username and password. 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. Password: must be 8 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.
C. Username: username must start with a letter, must have at least 6
characters.
D. Province: must be selected from a drop down list of displayed provinces (only
Canadian provinces allowed), you may have ONTARIO as default selection in
which case no validation is required.
E. Street name: cannot contain digits.
F. Email: use html5 input type for default validation
G. Phone#: must be 10 digits, hyphen in the 4th and 8th position, format allowed
xxx-xxx-xxxx, for example 111-111-1111.
H. Zip Code: only Canadian format allowed (Letter Digit Letter Digit Letter Digit),
for example C1A1A7.
I. City: must contain letters only.
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 registration 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:
(3) CSS and JS: you must have external css file called normalize1.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 5. The indentation reflects the location
of the files. You must abide by the naming of the following structure (all are lower
case).
Assignment5 folder
index.html
normalize1.css
registration.html
registration.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 Assignment5.zip
b) Upload the zip file to My.Seneca under Assignments -> Assignment 5 (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.
