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


#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);
  
}

#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

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