JavaScript代写:CS368 Shopping Website

用JavaScript和HTML代写前端页面,实现Shopping Cart页面和Shipping Details页面的交互逻辑。

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.