Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CS368 Shopping Website

Overview

Using a combination of HTML and JavaScript functionality, implement some specific user interaction features in the provided “Shopping Cart” and “Shipping Details” pages. Both HTML documents and some initial JavaScript are provided for you in the document.

cart.html - a simple HTML shopping cart

shipping.html - a simple form for billing and shipping details.

css/ - folder containing styles used for both pages

images/ - folder containing product images

js/ - folder containing cart.js and shipping.js

The tasks can be completed using native JavaScript and HTML code only. However, if you wish to use jQuery code to implement some functionality, you may download jQuery and link it to the HTML documents as and external script. You are allowed to edit the HTML documents as long as the information and overall presentation of each page is not affected.

Marking Criteria

Shopping Cart

The item quantity fields should allow user-friendly entry of number values

The number in the item quantity fields should be limited to values between 1 and 10 inclusive

When an item quantity is changed, automatically recalculate the sub-total for that item

When clicking on an item’s × button, remove the item’s entire table row from the table

When a sub-total changes or an item is removed, automatically update the final cart total

When the “Go to Checkout” button is clicked, navigate to the “Shipping Details” page

Shipping Details

When the checkbox is selected, any information in the billing fields should be copied to the shipping fields

When the checkbox is deselected, any information in the shipping fields should be cleared.

Prevent form submission if any of the fields are left empty - except for the “Address 2” fields which are optional

Ensure that the user has entered an email and Australian postcode in the correct formats

The JavaScript files provided for this task contain some comments to help you understand the partially complete functionality that is currently implemented.