var cardsData = [
{
inStock: true,
imgUrl: 'gllacy/choco.jpg',
text: 'Сливочно-кофейное с кусочками шоколада',
price: 310,
isHit: true,
specialOffer: 'Двойная порция сиропа бесплатно!'
},
{
inStock: false,
imgUrl: 'gllacy/lemon.jpg',
text: 'Сливочно-лимонное с карамельной присыпкой',
price: 125,
isHit: false
},
{
inStock: true,
imgUrl: 'gllacy/cowberry.jpg',
text: 'Сливочное с брусничным джемом',
price: 170,
isHit: false
},
{
inStock: true,
imgUrl: 'gllacy/cookie.jpg',
text: 'Сливочное с кусочками печенья',
price: 250,
isHit: false
},
{
inStock: true,
imgUrl: 'gllacy/creme-brulee.jpg',
text: 'Сливочное крем-брюле',
price: 190,
isHit: false
}
];
var renderCards = function(goodsData) {
var cardsList = document.querySelector('ul.goods')
var crEl = function(el, elClass, text) {
var element = document.createElement(el);
element.classList.add(elClass);
if (text) element.textContent = text;
return element;
}
for (let card of goodsData) {
var item = crEl('li', 'good')
var itemClasses = [card.inStock ? 'good--available' : 'good--unavailable'];
if (card.isHit) itemClasses.push('good--hit');
item.classList.add(...itemClasses)
var title = crEl('h2', 'good__description', card.text);
item.appendChild(title);
var pict = crEl('img', 'good__image');
pict.src = card.imgUrl;
pict.alt = card.text;
item.appendChild(pict);
var price = crEl('h2', 'good__price', card.price + '₽/кг');
item.appendChild(price);
if (card.isHit && card.specialOffer) {
var special = crEl('p', 'good__special-offer', card.specialOffer);
item.appendChild(special);
}
cardsList.appendChild(item);
}
}
renderCards(cardsData);
@Kolya-YA ошибка в
var price = crEl('h2', 'good__price', card.price + '₽/кг');
вы указываете тег h2, а для цены нужен тег p.