- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Каталог | Техномарт</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">Пассатижи «Суперхват»</h2>
<img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Пассатижи «Суперхват»">
<p class="product__price">800 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Отвёртка «Буравочка»</h2>
<img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Отвёртка «Буравочка»">
<p class="product__price">550 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Плоскогубцы «Коперник»</h2>
<img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Плоскогубцы «Коперник»">
<p class="product__price">1 350 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Перфоратор «Привет, сосед!»</h2>
<img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Перфоратор «Привет, сосед!»">
<p class="product__price">7 500 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Молоток «Мьёльнир»</h2>
<img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Молоток «Мьёльнир»">
<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: "Товар дня";
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: "Нет в наличии";
position: absolute;
top: 0;
left: 0;
padding: 5px;
font-size: 14px;
}
JavaScript
var catalogData = [
{
isAvailable: true,
isSpecial: false
},
{
isAvailable: false,
isSpecial: false
},
{
isAvailable: true,
isSpecial: true
},
{
isAvailable: true,
isSpecial: false
},
{
isAvailable: false,
isSpecial: false
}
];
var updateCards = function (products) {
var elements = document.querySelectorAll('.product');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
console.log(element);
element.classList.add('product--available');
}
};
updateCards(catalogData);
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Консоль
ЗадачиВыполнено
0
- После вывода в консоль
elementсоздайте переменнуюproduct, которая равна текущему элементу массиваproducts, а затем выведите её в консоль. - После вывода
productсоздайте переменнуюavailabilityClassсо значением'product--available'. - После этой переменной добавьте проверку, что товара нет в наличии.
- Если условие выполняется, переопределите значение
availabilityClassна'product--unavailable'. - В вызове метода
classList.add()у текущего DOM-элемента замените строку'product--available'на переменнуюavailabilityClass.