web design

web design

You have been asked to design and implement a checkout form. Imagine that a user has been navigating an online store that sells a variety of sports equipment. The user

has added a number of items to his or her shopping cart and is going through the checkout process to order the items online. The checkout page shows what the user

bought and allows him or her to enter his or her information (name, address, credit card number, etc.) to complete the order. You are going to design this checkout

form.
Software Citation Requirements

This course uses open-source software, which must be cited when used for any student work. Citation requirements are on the Open Source Applications page.
Please review the installation instruction files to complete your assignment.
Deliverables
NOTE

Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)

Step Deliverable/Components Points
Step 1 – Includes all of the required elements: title, subtitle, table of items (5 points)
– Design, layout, CSS (5 points) 10
Step 2 Includes all of the required form elements: name, address, e-mail address, ship or pick-up, credit card type, and number (10 points)
– Choose appropriate controls for the input (5 points)
– Set form tag correctly (5 points) 20
Step 3

Validation of the required elements (5 points)
– Unobtrusive validation used (3 points)
– Prevent from submission on invalid data (2 points)
Transfers to thanks.html on valid submission

10
Total 40

Required Software

This Lab will use the following Lab Resources:

Virtual Lab – Citrix
Adobe Creative Cloud Subscription

Use a personal copy of the software or access the Lab Resources, go to the Course Resources page – Lab Resources section.
Lab Steps
STEP 1: Create Web Page

Using what you learned in Weeks 1 to 4, create a Web page that includes the following.

A title for the online store���you make one up!
A subtitle that says ���Complete Your Order���
The items that the user ordered
One kayak with rudder for $775.00
One 10 L dry bag for $15.00
Two helmets for $50.00 each
The total cost for the order

Feel free to add a layout, style, color, and graphics to the page as you see fit.
STEP 2: Add An HTML Form To The Page

The page must include a way for the user to enter his or her

name;
address (street, city, state/province, country);
phone number;
e-mail address;
preference for shipping or picking up the order;
credit card type (one of Visa, MasterCard, or American Express); and
credit card number.

There must also be a button to complete the order.

You should choose the appropriate form element for each input. For example, a textbox should be used for “name.”

Create a simple HTML page with a Heading Level 1 that says ���Thank You!��� Save this as thanks.html.

Note: If this page was part of a real store, we would set the form action to a server script to handle the order. However, for the purpose of this lab, please set the

form action to thanks.html. When a valid form is completed, the form will redirect to this page.
STEP 3: Add Unobtrusive Validation To The HTML Form

Include unobtrusive validation to the form. You must ensure that

name and address are not blank;
one of the ship or pick-up options is selected;
a credit card type is selected; and
a credit card number is not blank.

If the form does not validate, notify the user and do not allow the form to submit.
STEP 4: iLab Submission

Create a folder called CIS363A_YourLastName_W5_Lab.
Put copies of each required deliverable into the new folder.
Right-click on the folder and select Send To -> Compressed (zipped) folder. You can also use other tools to compress the files into a single zip folder (e.g., 7-

zip).
Upload the zip file to the Week 5 iLab Dropbox, located at the top of this page.

Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

See the Syllabus section “Due Dates for Assignments & Exams” for due date information.

 
"Looking for a Similar Assignment? Get Expert Help at an Amazing Discount!"