JavaScript · Exercise 5 of 5 Previous
Intermediate
Build a product grid from data
Write renderProducts(products) that fills #grid from an array of { id, name, price, stock } objects, using the <template id="card-tpl">.
For each product: put the name in .name, the price as ₹ plus the number (e.g. ₹499) in .price, and set data-id on the card to the id.
If stock is 0, add the class sold-out to the card and set .badge to Sold out; otherwise .badge says In stock.
The function must replace any cards already in the grid, and update #count to say e.g. 3 products. Names must show exactly as typed (they come from sellers).
What Check tests
- On load the grid shows 3 cards with the right names
- Prices look like
₹499and cards carrydata-id - Sold-out products get the class and the
Sold outbadge - Rendering again replaces the cards and updates the count
- Seller names are shown as text, never as HTML
- The template itself stays empty for next time
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.