Theory
Theory
Comments

Temporarily unavailable

The loop works and correctly goes through the collection of DOM elements. Let’s implement the program.

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.

To display the status of product availability, we need to add different classes to the DOM element. We will do this in several steps:

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.
Add product property check for isAvailable. If it is false (the product is not available), change the value of the variable to product--unavailable.
Use classList.add() to add to the DOM element the class saved in the variable.

In the “Conditions” course, you learned that Boolean values can act as conditions. Therefore our check could look something like this:

var value = true;

if (value) {
  // Code will be executed
}

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:

var value = false;

if (!value) {
  // Code will be executed
}

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Catalog | Technomart</title> <link rel="stylesheet" href="technomart/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product"> <h2 class="product__title">Combination pliers “Superhook”</h2> <img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Combination pliers “Superhook”"> <p class="product__price">800 ₽</p> </li> <li class="product"> <h2 class="product__title">Screwdriver “Philly”</h2> <img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Screwdriver “Philly”"> <p class="product__price">550 ₽</p> </li> <li class="product"> <h2 class="product__title">Pliers “Copernicus”</h2> <img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Pliers “Copernicus”"> <p class="product__price">1,350 R.</p> </li> <li class="product"> <h2 class="product__title">Puncher “Hello, neighbor!”</h2> <img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Puncher “Hello, neighbor!”"> <p class="product__price">7,500 ₽</p> </li> <li class="product"> <h2 class="product__title">Hammer “Mjöllnir”</h2> <img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Hammer “Mjöllnir”"> <p class="product__price">2,000 ₽</p> </li> </ul> <script src="script.js"></script> </body> </html>

CSS

.product { position: relative; display: flex; flex-direction: column; align-items: center; width: 220px; margin-bottom: 20px; text-align: center; border: 1px solid #cccccc; } .product--special { flex-basis: 100%; order: -1; border-color: #ee3643; } .product--special::after { content: "Product of the day"; position: absolute; top: 0; right: 0; height: 30px; padding-right: 10px; padding-left: 10px; line-height: 30px; color: #ffffff; background-color: #ee3643; } .product--available::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; padding: 5px; background-image: url("technomart/check.svg"); background-repeat: no-repeat; background-position: center; background-size: 18px; border: 1px solid #4eb543; border-radius: 50%; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::before { content: "Out of stock"; position: absolute; top: 0; left: 0; padding: 5px; font-size: 14px; }

JavaScript

Click inside the mini browser to put the focus in this window.

Goalscompleted

After logging the element in the console, create a variable product, which is equal to the current element of array products, and then log it in the console.
After logging product in the console, create a variable availabilityClass with 'product--available' value.
After this variable, add a check to make sure that the product is not available.
If the check works, override the value of availabilityClass to 'product--unavailable'.
In the call of the classList.add() method, replace string 'product--available' with variable availabilityClass for the current DOM element.

Temporarily unavailable

Comments

Log in

Sign up

Restore access