Beginner
A product card with every kind of prop
Finish ProductCard so it receives name (string), price (number), inStock (boolean) and tags (array of strings), and renders an <article className="product"> containing:
an <h3> with the name; a <p className="price"> showing the price as ₹ plus two decimals (price.toFixed(2)); a <p className="stock"> that says In stock or Sold out; and a <p className="tags"> with the tags joined by · (space, middle dot, space).
Render two cards: Mango juice, price 60, in stock, tags cold and fresh; and Lassi, price 45.5, not in stock, tag sweet. Pass numbers and booleans with braces.
What Check tests
- Two
.productcards with the names Mango juice and Lassi - Prices show
₹60.00and₹45.50 - Stock lines say
In stockandSold out - Tags show
cold · freshandsweet
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.