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


#21

Создание элементов и добавление классов к ним тоже должно быть внутри цикла.
Также обратите внимание на порядок добавления тегов внутри карточки. Всё должно быть как в образце, то есть сначала заголовок, потом изображение, дальше цена и наконец “спец. предложение”, если есть. Если порядок элементов не совпадет, то даже при отсутствии видимых отличий на скринах, проверку пройти не удастся.


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

var renderCards = function(good) {
  listItem = makeElement('li', 'good');
  
  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);
  
  var availabilityClass = 'good--available';
    if (!good.inStock) {
        availabilityClass = 'good--unavailable';
      }
      listItem.classList.add(availabilityClass);
    
  if (good.isHit) {
    listItem.classList.add('good--hit');
    var specialPrice = makeElement('p', 'good__special-offer', good.specialOffer);
    listItem.appendChild(specialPrice);
  }
return listItem;
}

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

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

Я решил как было в предыдущем задании, только вот теперь с конкатенацией проблемы. Как мне вставить ‘₽/кг’?


#23

а всё разобрался сам, var price = makeElement('p', 'good__price', good.price + '₽/кг'); listItem.appendChild(price);


#24

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

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

return element
}

var createCards = function(product) {
  var listItem = elements('li', 'good');
  
   var availableClass = 'good--available';
  if (!product.inStock) {
 availableClass = 'good--unavailable'; 
  }
  listItem.classList.add(availableClass);
  
  var title = elements('h2', 'good__description', product.text);  
  listItem.appendChild(title);

  var picture = elements('img', 'good__image');
  picture.src = product.imgUrl;
  picture.alt = product.text;
  console.log(picture);
  
  listItem.appendChild(picture);  
  
  var price = elements('p', 'good__price', product.price);  
  listItem.appendChild(price);
  
  if (product.isHit) {
listItem.classList.add('good--hit');
var specialPrice = elements('p', 'good__special-offer', product.specialOffer);    
listItem.appendChild(specialPrice);
  }
 
  return listItem;
}

var renderCards = function(itemsData) {
var parentOfCards = document.querySelector('.goods');

for (var i = 0; i < itemsData.length; i++) {    
  var renderCard = createCards(itemsData[i]);
  parentOfCards.appendChild(renderCard);
}
}

renderCards(cardsData);

#25

Все, нашел )))
нужно после цены добавить р/кг.
price.textContent += ‘₽/кг’;


#26

Помогите найти ошибку. Картинки внешне совпадают, на задание не проходит.
Заранее спасибо.

var createElement = function(name, classIt, text) {

var element = document.createElement(name);
element.classList.add(classIt);
if (text) {
element.textContent = text;
};
return element;
}

var renderCards = function(products) {
var item = createElement(‘li’, ‘good’);

var title = createElement(‘h2’, ‘good__description’, products.text);
item.appendChild(title);

var picture = createElement(‘img’, ‘good__image’, products.text);
picture.src = products.imgUrl;
picture.alt = products.text;
item.appendChild(picture);

var discrip = createElement(‘p’, ‘good__price’, products.price + ‘₽/кг’)
item.appendChild(discrip);

var stock = ‘good–available’;
if (!products.inStock) {
stock = ‘good–unavailable’
};
item.classList.add(stock);

if (products.isHit) {
item.classList.add(‘good–hit’);
var specOffer = createElement(‘p’, ‘good__special-offer’, products.specialOffer);
item.appendChild(specOffer);
};

return item;
}

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

for (var i = 0; i < cardsData.length; i++) {
var card = renderCards(cardsData[i]);
ulli.appendChild(card)
}