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


#27

Подскажите, мне не понятен небольшой момент.
Зачем параметром функции renderCards делать массив?
(помимо того, что так витиевато сказано в тексте задания)
Ведь мы передаем свойства объектов массива внутрь функции в любом случае и на выходе получим кол-во создаваемых DOM-ов согласно итерации цикла по вышеуказанному массиву… так зачем тогда?

Если нужен код моего задания. У меня было несколько вариантов решения с доп функциями и без ( от простого к сложному), но из-за сбоя браузера остался только простейший вариант… хотя мне кажется для моего вопроса это совсем не нужно

var renderCards = function(cardsData){

for (var i = 0; i < cardsData.length; i++){
var goods = document.querySelector(’.goods’);

//Создание li ------------------------------------

var element = document.createElement(‘li’);
element.classList.add(‘good’);
if (!cardsData[i].inStock) {
element.classList.add(‘good–unavailable’);
} else {
element.classList.add(‘good–available’);
}
if (cardsData[i].isHit) {
element.classList.add(‘good–hit’);
}
goods.appendChild(element);

//Создание h2 ------------------------------------

var h2 = document.createElement(‘h2’);
h2.classList.add(‘good__description’);
h2.textContent = cardsData[i].text;
element.appendChild(h2);

//Создание img ------------------------------------

var image = document.createElement(‘img’);
image.classList.add(‘good__image’);
image.alt = cardsData[i].text;
image.src = cardsData[i].imgUrl;
element.appendChild(image);

//Создание p ------------------------------------

var p = document.createElement(‘p’);
p.classList.add(‘good__price’);
p.textContent = cardsData[i].price + ‘₽/кг’;
element.appendChild§;

//Создание p2 ------------------------------------

if(cardsData[i].specialOffer) {
p2 = document.createElement(‘p’);
p2.classList.add(‘good__special-offer’);
p2.textContent = cardsData[i].specialOffer;
element.appendChild(p2);
}
}
}

renderCards(cardsData);


#28

Ne smog proit poslednee ispitanie…
Vrode vsio narmalno…
Ne mojete podskazat, v chiom problema?

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

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

  for (var i = 0; i < cardsInfo.length; i++) {
    var info = cardsInfo[i];
    
    var card = createElement('li', 'good');
    
    var availabilityClass = 'good--available';
    if (!info.inStock) {
      availabilityClass = 'good--unavailable'; 
    }
    card.classList.add(availabilityClass);
    
    var title = createElement('h2', 'good__description', info.text);
    card.appendChild(title);
    
    var picture = createElement('img', 'good__image');
    picture.src = info.imgUrl;
    picture.alt = info.text;
    card.appendChild(picture);
    
    var price = createElement('p', 'good__price', info.price + '₽/к');
    card.appendChild(price);
    
    if (info.isHit) {
      card.classList.add('good--hit');
      var specialOffer = createElement('p', 'good__special-offer', info.specialOffer);
      card.appendChild(specialOffer);
    }
    
    goods.appendChild(card);
  }
 
};

renderCards(cardsData);