JavaScript испытание Мороженое. Возвращение

[Dogunok]

Сделал задание, отображается все точно так же как и на картинке, но при проверке показывает что ничего не совпадает…
В чем проблема?

Код

var renderCards = function (i) {
  var ul = document.querySelector('.goods');
  var li = document.createElement('li');
  var h2 = document.createElement('h2');
  var img = document.createElement('img');
  var p = document.createElement('p');
  var p2 = document.createElement('p');
       li.classList.add('good');
       h2.classList.add('good__description');
       p.classList.add('good__price');

       h2.innerHTML = cardsData[i].text;
       img.src = cardsData[i].imgUrl;
       img.alt = cardsData[i].text;
       p.innerHTML = cardsData[i].price + '₽/кг'

if (cardsData[i].inStock === true){
      li.classList.add('good--available');
} else {
li.classList.add('good--unavailable');
}
  
li.appendChild(h2);
li.appendChild(img);
li.appendChild(p);

if(cardsData[i].isHit === true){
li.classList.add('good--hit');
p2.classList.add('good__special-offer');
p2.innerHTML = cardsData[i].specialOffer;
li.appendChild(p2);
}  

return ul.appendChild(li);
}

 for (var  i = 0; i < cardsData.length; i++){
    renderCards(i);
 }

[B-Rodion]

Та же проблема.(

мой код

    var renderCards = function() {
  var createElement = function(tagName, className, text) {
  var element = document.createElement(tagName);
  if (className) {
    element.classList.add(className);
  }
  
  if (text) {
    element.textContent = text;
  }
  return element;
};

var createCard = function(product) {
  var listItem = createElement('li', 'good');
  
  var title = createElement('h2', 'good__description', product.text);
  listItem.appendChild(title);
  
  var image = createElement('img');
  image.src = product.imgUrl;
  image.alt = product.text;
  listItem.appendChild(image);
  
  var fullPrice = product.price + '₽/кг';
  var price = createElement('p', 'good__price', fullPrice);
  listItem.appendChild(price);
  
  var inStockClass = 'good--available';
  if (!product.inStock) {
    inStockClass = 'good--unavailable';
  }
  listItem.classList.add(inStockClass);
  
  if (product.isHit) {
    listItem.classList.add('good--hit');
     var specialOffer = createElement('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);
 }
};

renderCards(cardsData);

[Ineska]

@B-Rodion и @Dogunok, форматируйте свой код в сообщении с помощью кнопки </>.

[randomrationalizer]

Возможно, проблема в том, что не добавлен класс “good__image” для img?

[Ineska]

Но в css нет класса для изображения.
Вам удалось пройти испытание?

[B-Rodion]

В задании нет такого условия

[Dogunok]

Я нашел в чем различия у меня…, Отступ между картинкой и названием мороженого разный…,почему не понятно. Исправил добавив marginBottom теперь идентично…,класс img тоже добавлял…

[Ineska]

Отступ между картинкой и названием мороженого разный

Для меня это загадка, даже интересно стало…

[B-Rodion]

Можно скрин где разный отступ?

[Ineska]

UPD: в каждую карточку добавляется второй параграф, независимо от того, есть specialOffer или нет.

[Dogunok]

Это мой косяк, исправил теперь)

[Purport_of_Life]

Я малясь считерил и подсмотрел правильный код и как оказалось:
если не задать изображению класс ‘good__image’, проверка Кекса не сработает, даже если код правильный, хотя в условии про него ничего и не сказано (наверное недочет в описании задания) …

[B-Rodion]

Действительно) все получилось, как только дописал image.classList.add(‘good__image’);
спасибо)

[GreenLera]

привет, в теории задания приводится пример разметки карточки, там указаны все элементы разметки с необходимыми классами.
Если это вызывает затруднения и неочевидно, мы поправим теорию задания в скором времени

[Purport_of_Life]

У меня просто тоже проблема была, вроде все верно, а где-то ошибка… Я просто теорию прочитал, а дальше ориентировался на комментарии в коде. Только сейчас спецом посмотрел: в теории у картинки класс имеется, а в комментариях класс отсутствует, если бы класс для картинки добавить еще и в комментарии тогда у невнимательных, вроде меня, проблем не возникнет

[kaineer]

Как уже заметили в обсуждении, не указан класс good__image.

[magistr4815]

В задании проблема и не указан класс на картинке good__image :

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');
  picture.src = product.imgUrl;
  picture.alt = product.text;
  listItem.appendChild(picture);

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

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

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

  return listItem;
};

var renderCards = function(itemsData) {
  var box = document.querySelector('.goods');
  for(var i = 0; i<itemsData.length; i++) {
    var a = createCard(itemsData[i]);
    box.append(a);
  }
}

renderCards(cardsData);

[skankhunter]

В чем проблема, почему создается только одна карточка?

var renderCards = function (array) {
var ul = document.querySelector(’.goods’),
li = document.createElement(‘li’),
h2 = document.createElement(‘h2’),
img = document.createElement(‘img’),
p = document.createElement(‘p’),
p2 = document.createElement(‘p’);

li.classList.add(‘good’);
h2.classList.add(‘good__description’);
img.classList.add(‘good__image’);
p.classList.add(‘good__price’);

for (var i = 0; i < array.length; i++) {

  h2.innerHTML = array[i].text;
  img.src = array[i].imgUrl;
  img.alt = array[i].text;
  p.innerHTML = array[i].price + '₽/кг';
  
 if (array[i].inStock === true) {
    li.classList.add('good--available');
  }  
  else {
    li.classList.add('good--unavailable');
  }
        
  if (array[i].isHit === true) {
    li.classList.add('good--hit');
    p2.classList.add('good__special-offer');
    p2.innerHTML = array[i].specialOffer;
    li.appendChild(p2);
  }  

}

  li.appendChild(h2);
  li.appendChild(img);
  li.appendChild(p);

return ul.appendChild(li);
}

renderCards(cardsData);

[Ineska]

return ul.appendChild(li);

Здесь вы возвращаете из функции карточку. Потом вызываете функцию, один раз.
Функция отработала один раз - сделала одну карточку.

[skankhunter]

Мда, выходит тогда не то, что нужно(( что надо исправить, чтобы работало как надо?