Intermediate
Product cards that announce cart:add
Each product card's Add button should dispatch a custom event named cart:add that bubbles, with detail set to { name, price } (price as a number), read from the card's data-name and data-price.
Separately, a listener on document should update #count (number of items) and #total (sum of prices) whenever cart:add happens.
The cards must not touch #count or #total themselves.
What Check tests
- Add dispatches
cart:addwith the right detail - The event bubbles
- The count goes up by one per Add
- The total adds the price
- The cart reacts to the event, not to the buttons
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.