0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Muffin was pleased with your work and gave you a new task: now you need to add product cards to the page of the selfie stick shop.</p>
1
<p>Muffin was pleased with your work and gave you a new task: now you need to add product cards to the page of the selfie stick shop.</p>
2
<p>Previously, we received data about the state of the products; this time, complete information will be loaded from the 1-Muffin program. The data will contain the name of the product, its price, image, availability for order and other information. Therefore, to solve the problem, we do not need a layout designer, because we will have all the data. We will add the elements to the layout using scripts.</p>
2
<p>Previously, we received data about the state of the products; this time, complete information will be loaded from the 1-Muffin program. The data will contain the name of the product, its price, image, availability for order and other information. Therefore, to solve the problem, we do not need a layout designer, because we will have all the data. We will add the elements to the layout using scripts.</p>
3
<p>Even though 1-Muffin program is glitching for now and does not want to give us the loaded info. Therefore, first, in order not to lose time, we will create one card from scratch. The layout designer showed us how the product cards should be laid out, and that’s why we already have them in the layout. We will use these cards as models when creating our own, and then delete them and add all the cards by ourselves.</p>
3
<p>Even though 1-Muffin program is glitching for now and does not want to give us the loaded info. Therefore, first, in order not to lose time, we will create one card from scratch. The layout designer showed us how the product cards should be laid out, and that’s why we already have them in the layout. We will use these cards as models when creating our own, and then delete them and add all the cards by ourselves.</p>
4
<p>As usual, we will solve the task step-by-step: create an element, fill it with the necessary content and add suitable classes.</p>
4
<p>As usual, we will solve the task step-by-step: create an element, fill it with the necessary content and add suitable classes.</p>
5
<p>To make the card appear in the layout, you need to find the parent element where this card will be added to. In our case, it is the products list. It’s in it that the product cards are stored, and three of them are already in the layout. We can find them not only with querySelectorAll, but also with property children of the products list.</p>
5
<p>To make the card appear in the layout, you need to find the parent element where this card will be added to. In our case, it is the products list. It’s in it that the product cards are stored, and three of them are already in the layout. We can find them not only with querySelectorAll, but also with property children of the products list.</p>
6
<p>Accessing the property looks like this: element.children. This property returns a collection of child, that is, nested, DOM elements. In the case of our list, the collection must consist of three elements: one for each element of the li list.</p>
6
<p>Accessing the property looks like this: element.children. This property returns a collection of child, that is, nested, DOM elements. In the case of our list, the collection must consist of three elements: one for each element of the li list.</p>
7
<p>Before adding a new card, we’ll find the products list and log the list of its child elements in the console using children. Let’s sure that the collection length is equal to the number of nested elements, and only then will we begin to add a new card.</p>
7
<p>Before adding a new card, we’ll find the products list and log the list of its child elements in the console using children. Let’s sure that the collection length is equal to the number of nested elements, and only then will we begin to add a new card.</p>