Shopping Cart

Build a shopping cart: add products, change their quantities and apply a coupon, with a subtotal, a discount and a total. You practice immutable updates of a list of objects and values derived from state.

• The interface: the products with their Add buttons, the cart lines with − and +, the coupon form and the totals.
• Your job is the logic: store the cart and the coupon, and compute what is shown.
• Keep the aria-labels (Add T-shirt, Increase T-shirt, Decrease T-shirt, Quantity of T-shirt, Coupon code), the texts (Your cart is empty, Subtotal: $…, Discount: −$…, Total: $…, Invalid coupon) and the roles: the tests use them.

• At the start the cart is empty: you see Your cart is empty and Total: $0.00.
• Add puts the product in the cart with quantity 1; adding a product that is already there increases its quantity instead of adding another line.
• + and − change the quantity of a line; when it goes below 1, the line is removed.
• Each line shows its price times its quantity, and the subtotal adds up every line. Money is always shown with two decimals ($12.99).
• Apply with the code SAVE10 gives 10% off the subtotal: you see Discount: −$… and the total is the subtotal minus the discount. The discount is rounded to cents.
• Any other code shows Invalid coupon in an element with role="alert", and there is no discount.

• You add a Coffee mug → one line with $12.99, and Total: $12.99.
• You apply SAVE10 → Discount: −$1.30 and Total: $11.69.
• You press + on the mug → $25.98 on its line.

• Immutable updates of a list of objects.
• Values derived from state.
• Money and floating-point numbers.