0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>As soon as you were done with one task, Muffin showed up with another one.</p>
1
<p>As soon as you were done with one task, Muffin showed up with another one.</p>
2
<blockquote><p>Meow! Do you remember the ice cream shop? You need to create product cards based on the data received from the server.</p>
2
<blockquote><p>Meow! Do you remember the ice cream shop? You need to create product cards based on the data received from the server.</p>
3
<p>The data is an array of cardsData objects, one element corresponds to one product. Each object has the following properties:</p>
3
<p>The data is an array of cardsData objects, one element corresponds to one product. Each object has the following properties:</p>
4
<ul><li>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).</li>
4
<ul><li>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).</li>
5
<li>imgUrl: link to the product image.</li>
5
<li>imgUrl: link to the product image.</li>
6
<li>text: is product name.</li>
6
<li>text: is product name.</li>
7
<li>price: is price.</li>
7
<li>price: is price.</li>
8
<li>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.</li>
8
<li>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.</li>
9
<li>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.</li>
9
<li>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.</li>
10
</ul><p>Here is an example of the layout of one card in the directory:</p>
10
</ul><p>Here is an example of the layout of one card in the directory:</p>
11
<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><p>Note that the text in the alt attribute of the image must be the same as the name of the product.</p>
11
<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><p>Note that the text in the alt attribute of the image must be the same as the name of the product.</p>
12
<p>Create function renderCards, which will accept an input data array, call it by transferring cardsData and draw ice cream cards on the page.</p>
12
<p>Create function renderCards, which will accept an input data array, call it by transferring cardsData and draw ice cream cards on the page.</p>
13
</blockquote><p>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.</p>
13
</blockquote><p>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.</p>
14
<p>To create a string with a price, use the following concatenation: price + ' ₽/kg'.</p>
14
<p>To create a string with a price, use the following concatenation: price + ' ₽/kg'.</p>
15
<p>When you are done, press Hey boss, here’s your program! to show Muffin the results of your work.</p>
15
<p>When you are done, press Hey boss, here’s your program! to show Muffin the results of your work.</p>