23/23 Мороженое. Возвращение

Курсы JavaScript в браузере
1

Не проходит проверку, хотя визуально все совпадает. Помогите, пожалуйста, найти что не так)

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 createElements = function (tagName, className, text) {
  var element = document.createElement(tagName);
  element.classList.add(className);
  
  if (text) {
    element.contentText = text;
  }  
  return element;
};

var createCards = function (good) {
  var listItem = createElements('li', 'good');
  
  var titleItem = createElements('h2', 'good__description', good.text);
  
  var imgItem = createElements('img', 'good__image');
  
  var textItem = createElements('p', 'good__price', good.price);
  
  var vailable = 'good--available';
  if (!good.inStock) {
    vailable = 'good--unavailable';
  }
  listItem.classList.add(vailable);
  
  if (good.isHit) {
    listItem.classList.add('good--hit');
    var specialOffer = document.createElement('p');
    if (good.specialOffer) {
      specialOffer.classList.add('good__special-offer');
      specialOffer.textContent = good.specialOffer;
      }
    listItem.appendChild(specialOffer);
  }
  
  
  
  titleItem.textContent = good.text;
  listItem.appendChild(titleItem);
  
  
  imgItem.src = good.imgUrl;
  imgItem.alt = good.text;
  listItem.appendChild(imgItem);
  
  
  textItem.textContent = good.price + '₽/кг';
  listItem.appendChild(textItem);
    
  return listItem;  
}

var cardList = document.querySelector('.goods');
var cardListSpecial = document.querySelector('.good__special-offer');

for (var i = 0; i < cardsData.length; i++) {
  var cardItem = createCards(cardsData[i]);
  cardList.appendChild(cardItem);
  
}
1 лайк
2

У вас добавляется безусловно пустой абзац для спецпредложения в хитовые карточки (доберусь до компа, мож что поумнее выдавлю)

3

оказалось, что абзац добавлялся в начало элемента, а надо было в конец.
задача решена)

4

но вы все равно поправьте прикрепление по условию. вдруг кто забудет прописать спецпредложение хитовому товару

5

не понимаю почему проверку не проходит…сначала сам писал код, потом переписал просмотрев видео…всё равно не проходит…подскажите в чём проблема? Визуально всё идентично.

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 makeElement = function (tagName, className, text) {
  var element = document.createElement(tagName);
  element.classList.add(className);
  if (text) {
    element.textContent = text;
  }
  return element;
};

var createCard = function (good){
  var listItem = makeElement('li', 'good');
  
  var availabilityClass = 'good--available';
  if (!good.inStock){
    availabilityClass = 'good--unavailable'}
  listItem.classList.add(availabilityClass);
  
  var title = makeElement('h1', 'good__description', good.text);
  listItem.appendChild(title);
  
  var picture = makeElement('img', 'good__image');
  picture.src = good.imgUrl;
  picture.alt = good.text;
  listItem.appendChild(picture);
  
  var price = makeElement('p', 'good__price', good.price + '₽/кг');
  listItem.appendChild(price);
  
  if (good.isHit){
    listItem.classList.add('good--hit');
    var specialOffer = makeElement('p', 'good__special-offer', good.specialOffer);
    listItem.appendChild(specialOffer)};
  
  return listItem
  }

var renderCards = function (goods){
  var cardList = document.querySelector('.goods');
  for (var i = 0; i < goods.length; i++){
  
  var cardItem = createCard(goods[i]);
  cardList.appendChild(cardItem);
  }
  };
  
renderCards(cardsData)
6

заголовок товара должен быть h2.
запомните, что h1 на странице должен быть только один и чаще всего это название статьи, название магазина и т.п.
тем более, что это в ТЗ прописано
image

7

понял, спасибо

8

Не работает проверка
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(good) {
var listItem=makeElement(‘li’,‘good’);

var availabilityClass=‘good–available’;
if (!good.inStock) {
availabilityClass=‘good–unavailable’;
}

listItem.classList.add(availabilityClass);

var title=makeElement(‘h2’,‘good_description’,good.text);
listItem.appendChild(title);

var picture=makeElement(‘img’,‘good_image’);
picture.src=good.imgUrl;
picture.alt=good.text;
listItem.appendChild(picture)

var price=makeElement(‘p’,‘good__price’,good.price+‘₽/кг’);
listItem.appendChild(price);

if(good.isHit) {
listItem.classList.add(‘good–hit’);
var specialOffer=makeElement(‘p’,‘good__special-offer’, good.specialOffer);
listItem.appendChild(specialOffer);
}
return listItem;
}

var renderCards=function(goods) {
var cardList=document.querySelector(’.goods’);

for (var i=0;i<goods.length;i++) {
var cardItem=createCard(goods[i]);
cardList.appendChild(cardItem);
}

};

renderCards(cardsData)

9

а пока могу сказать что классы не соответствуют тз

11

Как его добавить в конец, если он у вас и так в конце?

12

Почему тест не пройден при 100% совпадении?!

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 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’, ‘good’);

var title = makeElement('h2', 'good__description', product.text);
listItem.appendChild(title);

var picture = makeElement('img', 'good__image', product.text);
picture.src = product.imgUrl;
picture.alt = product.text;
listItem.appendChild(picture);

var price = makeElement('p', 'good__price', product.price + '₽/кг');
listItem.appendChild(price);

var stockClass = 'good--available';
if (!product.inStock) {
    stockClass = 'good--unavailable';
  }
listItem.classList.add(stockClass);

if (product.isHit) {
    var hitClass = 'good--hit';
    listItem.classList.add(hitClass);
    var specialOffer = makeElement('p', 'good__special-offer', product.specialOffer);
    listItem.appendChild(specialOffer);
  }

return listItem;

}

var cardList = document.querySelector(’.goods’);

for (var i = 0; i < cardsData.length; i++) {
var cardItem = createCard(cardsData[i]);
cardList.appendChild(cardItem);
}