- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Catálogo | Device</title>
<link rel="stylesheet" href="device/setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="products">
</ul>
<script src="script.js"></script>
</body>
</html>
CSS
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 570px;
margin: 20px auto;
padding: 0;
list-style: none;
}
.product {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 270px;
margin-bottom: 30px;
}
.product__image {
order: -1;
width: 270px;
height: 380px;
margin-bottom: 15px;
}
.product__title {
max-width: 180px;
margin: 0;
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
.product__price {
max-width: 80px;
margin: 0;
text-align: right;
font-weight: 300;
font-size: 16px;
font-variant-numeric: lining-nums;
line-height: 27px;
}
.product--special {
order: -1;
width: 100%;
height: 380px;
flex-direction: column;
justify-content: flex-start;
align-content: space-between;
}
.product--special .product__title {
width: 270px;
max-width: 100%;
margin-bottom: 10px;
font-size: 28px;
line-height: 36px;
}
.product--special .product__price {
width: 270px;
max-width: 100%;
text-align: left;
text-decoration: line-through;
color: #cccccc;
}
.product--special .product__special-price {
margin: 0;
}
.product--special .product__image {
outline: 3px solid #ffc600;
}
.product--special::before {
content: "Producto del día";
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
font-weight: 500;
color: #111111;
text-transform: uppercase;
background-color: #ffc600;
}
.product--available::after,
.product--unavailable::after {
position: absolute;
top: 343px;
left: 50%;
padding: 10px 5px 2px 5px;
border-bottom: 1px solid #57c74b;
transform: translateX(-50%);
}
.product--available::after {
content: "Disponible";
}
.product--unavailable {
filter: grayscale(1) opacity(0.7);
}
.product--unavailable::after {
content: "Agotado";
}
.product--special.product--available::after,
.product--special.product--unavailable::after {
left: 135px;
}
JavaScript
var cardsData = [
{
isAvailable: true,
imgUrl: 'device/item-1.jpg',
text: 'Palo para selfies para principiantes',
price: 200,
isSpecial: false
},
{
isAvailable: false,
imgUrl: 'device/item-2.jpg',
text: 'Palo para selfies profesional',
price: 1500,
isSpecial: false
},
{
isAvailable: true,
imgUrl: 'device/item-3.jpg',
text: 'Palo para selfies insumergible',
price: 2500,
isSpecial: false
},
{
isAvailable: true,
imgUrl: 'device/item-4.jpg',
text: 'Palo para selfies «Sígueme»',
price: 4900,
isSpecial: true,
specialPrice: 100
}
];
var makeElement = function (tagName, className, text) {
var element = document.createElement(tagName);
element.classList.add(className);
if (text) {
element.textContent = text;
}
return element;
};
var createCard = function (product) {
var listItem = makeElement('li', 'product');
var title = makeElement('h2', 'product__title', product.text);
listItem.appendChild(title);
var picture = makeElement('img', 'product__image');
picture.src = product.imgUrl;
picture.alt = product.text;
listItem.appendChild(picture);
var price = makeElement('p', 'product__price', product.price);
listItem.appendChild(price);
var availabilityClass = 'product--available';
if (!product.isAvailable) {
availabilityClass = 'product--unavailable';
}
listItem.classList.add(availabilityClass);
if (product.isSpecial) {
listItem.classList.add('product--special');
var specialPrice = makeElement('p', 'product__special-price', product.specialPrice);
listItem.appendChild(specialPrice);
}
return listItem;
};
var cardList = document.querySelector('.products');
var productInfo = {
isAvailable: true,
imgUrl: 'device/item-1.jpg',
text: 'Palo para selfies para principiantes',
price: 200,
isSpecial: true,
specialPrice: 300
};
var cardItem = createCard(productInfo);
cardList.appendChild(cardItem);
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Consola
ObjetivosRealizado
0
- Elimina todo el código que está debajo de la declaración de
cardList. - Al final del programa, crea un ciclo
forque recorracardsData. Aumentaidesde0mientras sea menor que la longitud del arreglo. - Dentro del ciclo, llama a
createCardcon el elemento actual decardsDatay guarda el resultado en la variablecardItem. Declara esta variable dentro del ciclo, en cada iteración. - Debajo, dentro del ciclo, agrega
cardItema la lista de productoscardList.