This assignment requires the implementation of numerous XHTML documents used by an online-store that sells items for the Nunavut Tribal Society organization - an organization for Native Americans living in the outreaches of Northern Canada. The online-store will sell a variety of handmade goods such as jewelry, clothing, and arts/crafts offered by the organization. This assignment will implement the first part of the Nunavut Tribal Society website - only the pages consisting of the products offered by the online store. You will implement several HTML pages described in the subsequent sections. These pages will be integrated with Nunavut Tribal Society Home Page which will be implemented later in programming assignment 2.

HTML Pages

store_index.htm

This is the top-level page for the online store. The purpose of this page is to illustrate all the categories of products offered by the Nunavut Tribal Society. An example of this page is shown below:

		Fig. 1

There are 6 product categories as indicated by the hyperlinks in Fig. 1. The 6 categories (and their corresponding images) are:

Categories Images

Footwear slipper1.jpg

Jewelry earring1.jpg

Crafts dogsled1.jpg

Gloves gloves1.jpg

Accessories belt2.jpg

Miscellaneous buttons1.jpg

The corresponding images can be extracted from web-content.zip which can be downloaded from Blackboard.

Because of redundancy, only the links on the left side of the table -footwear, jewelry, and crafts - need be implemented for this assignment.

footwear.htm1

Pressing the hyperlink Footwear found in store_index.htm (See Fig. 1 above) results in the following page, containing products offered at the Footwear online-store, being displayed:

There are 4 different Footwear products offered. Their name with corresponding image are shown below:

Product Images

Caribou Skin Boots boots1.jpg

Moose Boots boots2.jpg

Brown Rabbit Slippers slipper1.jpg

Snow Rabbit Slippers slipper2.jpg

The user is returned to store_index.htm1 upon pressing the Continue Shopping hyperlink. Other links need not be implemented for this programming assignment.

jewelry.html

Pressing the hyperlink Jewelry found in store_index.htm (See Fig. 1 above) results in the following page, containing products offered at the Jewelrys online-store, being displayed:

There are 4 different products offered on the Jewelrys Online-Shop. . Their name with corresponding image are shown below:

Products Images

Earring s earring1.jpg

Necklace pendant4.jpg

Hair Clip hairclp1.jpg

Pendant pendant6.jpg

Pressing the Continue Shopping hyperlink returns the user to store_index.htm. Other links need not be implemented in this programming assignment.

artsAndCrafts.html

Pressing the hyperlink Crafts found in store_index.htm (See Fig. 1 above) results in the following page, containing products offered at the Arts/Crafts online-store, being displayed:

There are 4 products offered at the Arts/Crafts online store. Their names and corresponding images are shown below:

Products Images

Dog Sled dogsled1.jpg

Wood Carving (upper right) craft5.jpg

Wood Carving (lower left) craft7.jpg

Ivory Carvings pendant2.jpg

Pressing the Continue Shopping returns the user to the store_index.htm page. Other links need not be implemented for this assignment.

Product Pages Note

Individual html pages will be created for each product in programming assignment 2. The links for individual products need not be implemented in programming assignment 1. Well be using CSS to control the positioning, the background colors, and the fonts

Image

Input

Quantity Text Field

Selection

Price

Description

on these individual product pages in programming assignment 2.

checkout.html

Background color is

Lightblue

mc.jpg

visa.jpg

amex.jpg

discover.jpg

Submit

Implement the following HTML form that contains the user information once they are ready to check out:

						2018

Modify the following

tag on checkout.html as shown below:

The example webserver demonstrated in class can also be used for testing checkout.html as well. The validation rules will be implemented using two HTML 5 attributes - requried and pattern. A correctly completed form means that all fields have passed the validation rules. The validation rules are explained below in the next section If the form is not correctly completed, pressing the Submit button will display a message for a field that does not contain valid data. An example for an incorrectly entered First Name is shown below:

Note that the error message is automatically displayed by the Web Browser upon the user pressing the Submit (e.g., Buy Now) button.

Validation Rules

The suggested parameter names (enclosed in parenthesis) as specified in checkout.html are given below followed by the rules for each field:

First Name (name_first)

This field is required. The first name can only contain alphas (uppercase or lowercase), or a space (ascii 32. The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank)

Last Name (name_last)

This field is required. The last name can only contain alphas (uppercase or lowercase), a space (ascii 32), or tick mark ().The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank)

Email (email)

This field is required. The email field must contain any number of characters followed by the at sign - @ . Any number of characters can then follow the @ symbol. The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank)

Address1 (address1)

This field is required. Any data in this field is acceptable. The web browser should display the appropriate error message if this field is left blank.

Address2 (address2)

This field is optional. Can be left blank. Any data in this field is acceptable or it can be left blank.

City (city)

This field is required. The city can only contain alphas (uppercase or lowercase), or a space (ascii 32). The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank).

State (state)

This field is required. The state field must consist of 2 capital alpha letters. The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank).

Zip (zip)

This field is required. The zip code must consist of exactly 5 digits. The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank).

Phone (phone)

This field is required. Examples of valid phones are shown below:

5555555555

(555)555-5555

555-555-5555

The ()s and dashes are optional, no whitespace, 10 digits are required. . The web browser should display the appropriate error message if this field contains anything besides these characters, (or left blank).

Fax (fax)

This field is not required. Use the same rule described above for the phone field if it does contain data. The web browser should display the appropriate error message if this field contains anything besides these characters.

Credit Cart Type (radio)

This field is required. Only one credit card type can be selected. The web browser should display the appropriate error message if this field is left blank - no radio button selected.

Credit Card Number (cc_no)

This field is required. Each credit card should consist of 16 digits. The web browser should display the appropriate error message if this field contains anything besides these characters or is left blank.

Note: A more sophisticated algorithm will be implemented in a later assignment that will more correctly validate the credit card number. For this assignment, any 16 digit number will be acceptable.

Input Files

Download web-content.zip and unzip this in a folder of your choice (i.e. ProgrammingAssign1). The following directory structure is created:

web-content

|

images

/ \

\

checkout products--- artsCrafts

| \

miscellaneous

footwear \

accessories

gloves1

jewelry

The images needed in our projects should be stored in an organized way. The checkout directory contains the credit card images. The products directory contains images illustrating the different products the organization has for sale. More directories (and files) will be added to this same tree in future assignments. You will need to create these folders and add the images using Visual Studio.

The contents of each folder are listed below:

Folder Name Contents

footwear boots1.jpg, boots2.jpg, slipper1.jpg, slipper2.jpg

jewelry earring1.jpg, pendant4.jpg, hairclp1.jpg, pendant6.jpg\

artsCrafts dogsled1.jpg, craft5.jpg, craft7.jpg, pendant2.jpg

checkout mc.jpg, visa.jpg, amex.jpg, discover.jpg

gloves gloves.jpg

accessories belt2.jpg

miscellaneous buttons1.jpg

Other Considerations

The main objective of this project is to implement all links, images and the order form. I will not deduct points if your pages do not look exactly like the one in this document. Feel free to experiment with various spacing and alignment along with different background colors if you choose. However, all required functionality must be implemented. There are so many ways to implement this project use your own creativity and choose any approach you like as long as the HTML pages have all the required functionality and all images are displayed. Your work should be neat and readable. Feel free to utilize comments within your HTML it will help you when examining this project in the future. Also try to space your HTML appropriately (i.e., indent nested elements and utilize white space) so it is more readable. Be sure to display all images and all