- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Catálogo | 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">Alicates universales «Superagarre»</h2>
<img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Alicates universales «Superagarre»">
<p class="product__price">800 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Destornillador «Barrenita»</h2>
<img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Destornillador «Barrenita»">
<p class="product__price">550 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Pinzas «Copérnico»</h2>
<img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Pinzas «Copérnico»">
<p class="product__price">1,350 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Rotomartillo «¡Hola, vecino!»</h2>
<img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Rotomartillo «¡Hola, vecino!»">
<p class="product__price">7,500 ₽</p>
</li>
<li class="product">
<h2 class="product__title">Martillo «Mjölnir»</h2>
<img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Martillo «Mjölnir»">
<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: "Agotado";
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: "Producto del día";
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);
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Consola
ObjetivosRealizado
0
- Al final del cuerpo del ciclo, agrega otra condición que compruebe si el producto tiene una oferta especial.
- Si se cumple la condición, agrega la clase
product--specialal elemento DOM actual. - Elimina del código todas las salidas a la consola.