- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Catalog | 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: 500;
font-size: 18px;
line-height: 24px;
}
.product__price {
max-width: 80px;
margin: 0;
text-align: right;
font-weight: 300;
font-size: 16px;
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: "Product of the day";
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: "In stock";
}
.product--unavailable {
filter: grayscale(1) opacity(0.7);
}
.product--unavailable::after {
content: "Out of stock";
}
.product--special.product--available::after,
.product--special.product--unavailable::after {
left: 135px;
}
JavaScript
var cardsData = [
{
isAvailable: true,
imgUrl: 'device/item-1.jpg',
text: 'Selfie stick for beginners',
price: 200,
isSpecial: false
},
{
isAvailable: false,
imgUrl: 'device/item-2.jpg',
text: 'Professional selfie stick',
price: 1500,
isSpecial: false
},
{
isAvailable: true,
imgUrl: 'device/item-3.jpg',
text: 'Unsinkable selfie stick',
price: 2500,
isSpecial: false
},
{
isAvailable: true,
imgUrl: 'device/item-4.jpg',
text: 'Selfie stick “Follow me”',
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: 'Selfie stick for beginners',
price: 200,
isSpecial: true,
specialPrice: 300
};
var cardItem = createCard(productInfo);
cardList.appendChild(cardItem);
Click inside the mini browser to put the focus in this window.
Console
Goalscompleted
0
- Delete all the code below declaration of the
cardListvariable. - At the end of the program, create a
forloop, which iterates through the elements of thecardsDataarray, increasing the value ofifrom0to the length of thecardsDataarray. - In the body of the loop, call the
createCardfunction, transferring into it the current element of thecardsDataarray, and write the result of the call to thecardItemvariable (declare this variable inside each iteration of the loop). - Below, in the body of the loop, add
cardItemto products listcardList.
Comments