0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The loop works and correctly goes through the collection of DOM elements. Let’s implement the program.</p>
1
<p>The loop works and correctly goes through the collection of DOM elements. Let’s implement the program.</p>
2
<p>Let’s assume that the array with the data about products and the pseudo-array with DOM-elements always have the same length, it will allow us to go through two structures in one loop. Let’s set the product variable, which will match the current product. Then the current DOM element (we’re already saving it in the element variable) and the current product will match.</p>
2
<p>Let’s assume that the array with the data about products and the pseudo-array with DOM-elements always have the same length, it will allow us to go through two structures in one loop. Let’s set the product variable, which will match the current product. Then the current DOM element (we’re already saving it in the element variable) and the current product will match.</p>
3
<p>To display the status of product availability, we need to add different classes to the DOM element. We will do this in several steps:</p>
3
<p>To display the status of product availability, we need to add different classes to the DOM element. We will do this in several steps:</p>
4
<ul><li>Let’s create a variable to store the class associated with availability. By default, we believe that the product is available, and therefore the initial value of the variable will be product--available.</li>
4
<ul><li>Let’s create a variable to store the class associated with availability. By default, we believe that the product is available, and therefore the initial value of the variable will be product--available.</li>
5
<li>Add product property check for isAvailable. If it is false (the product is not available), change the value of the variable to product--unavailable.</li>
5
<li>Add product property check for isAvailable. If it is false (the product is not available), change the value of the variable to product--unavailable.</li>
6
<li>Use classList.add() to add to the DOM element the class saved in the variable.</li>
6
<li>Use classList.add() to add to the DOM element the class saved in the variable.</li>
7
</ul><p>In the “<a>Conditions</a>” course, you learned that Boolean values can act as conditions. Therefore our check could look something like this:</p>
7
</ul><p>In the “<a>Conditions</a>” course, you learned that Boolean values can act as conditions. Therefore our check could look something like this:</p>
8
var value = true; if (value) { // Code will be executed }<p>Only in our case, the check should work if the value of the isAvailable property is equal to false. Therefore, we need a check with negation:</p>
8
var value = true; if (value) { // Code will be executed }<p>Only in our case, the check should work if the value of the isAvailable property is equal to false. Therefore, we need a check with negation:</p>
9
var value = false; if (!value) { // Code will be executed }
9
var value = false; if (!value) { // Code will be executed }