0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>It turned out that we guessed it right with the classes! But Muffin is never satisfied. Now that he can load products from 1-Muffin, he wants us to update all products on the page. We’ll have to create a more complex program:</p>
1
<p>It turned out that we guessed it right with the classes! But Muffin is never satisfied. Now that he can load products from 1-Muffin, he wants us to update all products on the page. We’ll have to create a more complex program:</p>
2
<blockquote><p>Meow! There is an online store with a ready-made layout. We need to show the current information about the products on the interface: special offers and availability in the warehouse.</p>
2
<blockquote><p>Meow! There is an online store with a ready-made layout. We need to show the current information about the products on the interface: special offers and availability in the warehouse.</p>
3
<p>The data comes in the form of an array of catalogData objects. Each object corresponds to one product and contains properties isAvailable (whether the product is in or out of stock) and isSpecial (whether the product is on special offer or not).</p>
3
<p>The data comes in the form of an array of catalogData objects. Each object corresponds to one product and contains properties isAvailable (whether the product is in or out of stock) and isSpecial (whether the product is on special offer or not).</p>
4
<p>There is a corresponding class for each state of the product:</p>
4
<p>There is a corresponding class for each state of the product:</p>
5
<ul><li>product--available for products in stock;</li>
5
<ul><li>product--available for products in stock;</li>
6
<li>product--unavailable corresponds to a product that is not available;</li>
6
<li>product--unavailable corresponds to a product that is not available;</li>
7
<li>product--special for special offers.</li>
7
<li>product--special for special offers.</li>
8
</ul><p>I’m waiting for the result! Don’t be late, the clock is ticking!</p>
8
</ul><p>I’m waiting for the result! Don’t be late, the clock is ticking!</p>
9
</blockquote><p>Each element of the data array corresponds to a certain product on the page. We already know how to look for DOM elements and could find products one by one using querySelector. For example, using the loop:</p>
9
</blockquote><p>Each element of the data array corresponds to a certain product on the page. We already know how to look for DOM elements and could find products one by one using querySelector. For example, using the loop:</p>
10
for (…) { var product = querySelector('.product:nth-child(' + i + ')'); }<p>The querySelector method is arranged so that it always returns only the first element found. Therefore, at each iteration, we would have to run a search for the next element in the DOM tree. This search is quite an expensive operation.</p>
10
for (…) { var product = querySelector('.product:nth-child(' + i + ')'); }<p>The querySelector method is arranged so that it always returns only the first element found. Therefore, at each iteration, we would have to run a search for the next element in the DOM tree. This search is quite an expensive operation.</p>
11
<p>It’s much better to get a list of all the elements<em>before the loop</em>, and go through this list<em>inside the loop</em>. Here we can use the querySelectorAll method, which returns not the first element found, but a list (collection) of all elements that match the selector.</p>
11
<p>It’s much better to get a list of all the elements<em>before the loop</em>, and go through this list<em>inside the loop</em>. Here we can use the querySelectorAll method, which returns not the first element found, but a list (collection) of all elements that match the selector.</p>
12
<p>Create the updateCards function, in which we will work on the task. Find all products on the page and make sure that the search works correctly.</p>
12
<p>Create the updateCards function, in which we will work on the task. Find all products on the page and make sure that the search works correctly.</p>