←WebSprout logoWebSprout

Capstone: A Mini Market Dashboard

Stitch the price calculator, theme toggle, and a styled cart accordion into a single small dashboard. The pattern of every real frontend.

Step 1 of 3

The brief

Build a mini market widget. It must include:

  1. A theme toggle (light/dark) at the top.
  2. A price calculator: choose Sukuma Per kg or Bunch, set a quantity, see the live total.
  3. An Add to cart button that appends the current selection to a list below.
  4. The cart list shows each entry as a card with item, unit, qty, and total.

Use everything you learned: classList.toggle for the theme, an event-driven render() for the calculator, createElement for cart entries, CSS variables for theming.