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.