Interactive online courses HTML Academy
2026-03-09 14:10 Diff
https://htmlacademy.org/courses/javascript-browser/browser-intro/challenge

As soon as you were done with one task, Muffin showed up with another one.

Meow! Do you remember the ice cream shop? You need to create product cards based on the data received from the server.

The data is an array of cardsData objects, one element corresponds to one product. Each object has the following properties:

  • inStock: product availability. If the value is true, the product is available (for such a product, the designer created the good--available class); if it is false, the product not available (product with the good--unavailable class).
  • imgUrl: link to the product image.
  • text: is product name.
  • price: is price.
  • isHit: defines if the product is a bestseller. If the value is true, the product is a bestseller. For such a product, class good--hit was created.
  • specialOffer: a special offer, which is only available for bestsellers. Must be in a paragraph with class good__special-offer and must be the last child element in the card.

Here is an example of the layout of one card in the directory:

<ul class="goods"> <li class="good"> <h2 class="good__description">Creamy coffee with chocolate chip</h2> <img class="good__image" src="gllacy/choco.jpg" alt="Creamy coffee with chocolate chip"> <p class="good__price">110₽/kg</p> </li> … </ul>

Note that the text in the alt attribute of the image must be the same as the name of the product.

Create function renderCards, which will accept an input data array, call it by transferring cardsData and draw ice cream cards on the page.

Note the order in which the elements appear in the product card. Remember that when you insert with appendChild, the elements are added to the end of the parent.

To create a string with a price, use the following concatenation: price + ' ₽/kg'.

When you are done, press Hey boss, here’s your program! to show Muffin the results of your work.