- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Catalog | Glacie</title>
<link rel="stylesheet" href="gllacy/setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="goods">
<li class="good">
<h2 class="good__description">Creamy coffee with chunks of chocolate</h2>
<img src="gllacy/choco.jpg" width="220" height="220" alt="Creamy coffee with chunks of chocolate">
<p class="good__price">110 ₽/kg</p>
</li>
<li class="good">
<h2 class="good__description">Creamy lemon with caramel powder</h2>
<img src="gllacy/lemon.jpg" width="220" height="220" alt="Creamy lemon with caramel powder">
<p class="good__price">220 ₽/kg</p>
</li>
<li class="good">
<h2 class="good__description">Creamy with cranberry jam</h2>
<img src="gllacy/cowberry.jpg" width="220" height="220" alt="Creamy with cranberry jam">
<p class="good__price">310 ₽/kg</p>
</li>
<li class="good">
<h2 class="good__description">Creamy with cookie dough</h2>
<img src="gllacy/cookie.jpg" width="220" height="220" alt="Creamy with cookie dough">
<p class="good__price">400 ₽/kg</p>
</li>
<li class="good">
<h2 class="good__description">Creamy creme brulee</h2>
<img src="gllacy/creme-brulee.jpg" width="220" height="220" alt="Creamy creme brulee">
<p class="good__price">500 ₽/kg</p>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
CSS
.good {
position: relative;
display: flex;
width: 220px;
flex-direction: column;
align-items: center;
min-width: 267px;
margin-bottom: 35px;
padding: 15px 10px;
color: #ffffff;
}
.good--available::before,
.good--unavailable::before {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: inline-block;
padding: 5px 8px;
font-weight: bold;
font-size: 16px;
vertical-align: top;
text-align: center;
color: #ffffff;
background-image: linear-gradient(#e74a35 0%, #f26843 100%);
border: none;
border-radius: 5px;
}
.good--hit {
width: 100%;
order: -1;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.good--hit::after {
content: "";
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
width: 61px;
height: 61px;
margin: auto;
background-image: url("gllacy/hit.svg");
background-repeat: no-repeat;
}
.good--unavailable {
filter: grayscale(1) opacity(0.8);
}
.good--unavailable::before {
content: "Out of stock";
}
.good--available::before {
content: "In stock";
}
JavaScript
var assortmentData = [
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
},
{
inStock: true,
isHit: true
},
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
}
];
/* Technical assignment
Meow! We must display the current state of the products on the store website: “in stock”, “not available”, “bestseller”.
Product data is stored in an array with assortmentData objects, each object corresponds to one product and contains the following properties:
- inStock: if the value is true, ice cream is available, if it is false, the products is out of stock.
- isHit: if the value is true, the ice cream is the most popular among customers.
Each product state corresponds to a special class:
- Product in stock: good--available.
- Unavailable product: good--unavailable.
- Bestseller: good--hit.
Design the code as the updateCards function, which accepts data arrays. Call it by transferring assortmentData.
*/
Click inside the mini browser to put the focus in this window.
Console
// Input data
var assortmentData = [
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
},
{
inStock: true,
isHit: true
},
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
}
];
// Code written during the assignment
var updateCards = function (cards) {
var elements = document.querySelectorAll('.good');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var card = cards[i];
var availabilityClass = 'good--unavailable';
if (card.inStock) {
availabilityClass = 'good--available';
}
element.classList.add(availabilityClass);
if (card.isHit) {
element.classList.add('good--hit');
}
}
};
updateCards(assortmentData);