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

#29
Рабочий вариант
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 cardList = document.querySelector('.goods');

var renderCards = function(product){
for(var i = 0; i < product.length; i++){
var listItem = makeElement('li', 'good');
var title = makeElement('h2', 'good__description', product[i].text);
listItem.appendChild(title);

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

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

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

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

var goodList = renderCards(cardsData);`

#30

у меня прошел проверку, рабочий код:

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 renderCards = function (good) {
  var 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 cardsItems;
  cardsItems = renderCards(cardsData[i]);
  cardList.appendChild(cardsItems);
}