- 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--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;
}
.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;
}
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);
var product = products[i];
console.log(product);
var availabilityClass = 'product--available';
if (!product.isAvailable) {
availabilityClass = 'product--unavailable';
}
element.classList.add(availabilityClass);
}
};
updateCards(catalogData);
Click inside the mini browser to put the focus in this window.
Console
Goalscompleted
0
- At the end of the loop body, add one more check to make sure that the product is covered by a special offer.
- If the condition is met, add the
product--specialclass to the current DOM element. - Remove all console logs from the code.
Comments