Deviopath › React

Cart with Coupon Codes

Hard · Derived State

The cart starts with three items: Book (12), Pen (3) and Bag (45). Each item is an <li> with its name, price and a "Remove" button. The starter already has the four summary lines (subtotal, discount, shipping, total, all with 2 decimals): make them live.

Below the list there is an <input placeholder="Coupon code"> and an "Apply" button. Codes are trimmed and case-insensitive:

- SAVE10: 10% off the subtotal

- FREESHIP: shipping becomes 0

A valid code shows <p className="coupon-msg">Applied SAVE10</p> and replaces any previous coupon (coupons never stack). An unknown code shows "Invalid code" in the same paragraph and removes the applied coupon.

Shipping is 5 when the subtotal is above 0 and below 50, otherwise 0. All values update when items are removed. Tip: do the math in cents to avoid float errors.

Next: Reorderable Playlist