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

Ineska · 12.Апрель.2018 07:43:28

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

Damir_27 · 20.Апрель.2018 11:56:45

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

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

Damir_27 · 20.Апрель.2018 14:05:58

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

Zultan · 23.Апрель.2018 14:54:03

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

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

Zultan · 23.Апрель.2018 16:11:58

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

Alimaudgik · 07.Июнь.2018 07:52:23

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

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

HellYeah · 31.Август.2018 13:40:18

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

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

var renderCards = function(cardsData){

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

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

//Создание 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);

vtivadze · 18.Сентябрь.2018 00:21:25

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

And193 · 24.Сентябрь.2018 13:03:40

Рабочий вариант

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

Roman1 · 24.Ноябрь.2018 07:44:35

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

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

Vestiger · 04.Январь.2019 07:20:31

Создателям испытания на заметку: цена (число) и “Р/кг” должны быть разделены пробелом.

VadimSafin · 04.Январь.2019 17:32:15

Тоже не могу пройти испытание, вроде класс для изображения добавил. Подскажите пожалуйста, где я ошибся?

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 (product) {
  var listItem = makeElement('li', 'good');
    
  var availabilityClass = 'good--available';
  if (!product.inStock) {
    availabilityClass = 'good--unavailable';
  }
  listItem.classList.add(availabilityClass);
  
  var picture = makeElement('img', 'good__image');
  picture.src = product.imgUrl;
  picture.alt = product.text;
  listItem.appendChild(picture);

  var title = makeElement('h2', 'good__description', product.text);
  listItem.appendChild(title);

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

  if (product.isHit) {
    listItem.classList.add('good--hit');
    var specialPrice = makeElement('p', 'good__special-offer',product.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);  
}

VadimSafin · 04.Январь.2019 18:09:32

Поменял порядок добавления img и h2, тест прошел. То-есть, нужно добавлять элементы не по порядку, как указано в cardsData: inStock-imgUrl-text-price-isHit, а как указано в примере карточки: inStock-text-imgUrl-price-isHit

soze · 23.Март.2019 19:17:58

что то не помогает. все классы добавил все в указанном порядке и не работает проверка. хотя внешне все идентично

SunWukong · 20.Апрель.2019 17:40:54

Таже проблема, помогите разобраться

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 newItem = function (arrayItem) {
        
          var createElement = function (tegName, className) {
            var newElement = document.createElement(tegName);
            newElement.classList.add(className);
            return newElement;
          }
          
          var addElementCard = function (newTegName, newClassName, FeaturesValue) {
            var newElementCard = createElement (newTegName, newClassName);
              if (newTegName !== 'img') {
                newElementCard.textContent = FeaturesValue;
              } else {
                newElementCard.src = FeaturesValue;
              }
              cardElement.appendChild(newElementCard);
            }
        
          var listElement = document.querySelector('.goods');
        
          var cardElement = createElement ('li', 'good');
          arrayItem.inStock ? cardElement.classList.add('good--available') : cardElement.classList.add('good--unavailable');
          if (arrayItem.isHit) {cardElement.classList.add('good--hit')};
          
          addElementCard ('h2', 'good__description', arrayItem.text);
          
          addElementCard ('img', 'good__image', arrayItem.imgUrl);
          
          addElementCard ('p', 'good__price', arrayItem.price + '₽/кг');
          
          if (arrayItem.specialOffer) {
            addElementCard ('p', 'good__special-offer', arrayItem.specialOffer);
        }
        
      listElement.appendChild(cardElement);
      }
      
      var renderCards = function (arrayItem) {
          for (var i = 0; i < arrayItem.length; i++) {
          newItem(arrayItem[i])
          }
      };
      
      renderCards(cardsData);

Hierumo · 20.Апрель.2019 20:41:45

addElementCard - для чего? я так понял чтобы разбить createElement на 2 функции и увеличить количество строк.
визуально вроде верно, альт у изображений не прописан.

artcherenkov · 02.Июнь.2020 08:25:33

Рабочий вариант

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 createElement = 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 card = createElement('li', 'good');
  
  var title = createElement ('h2', 'good__description', product.text);
  card.appendChild(title);
  
  var picture = createElement ('img', 'good__image');
  picture.src = product.imgUrl;
  picture.alt = product.text;
  card.appendChild(picture);
  
  var price = createElement('p', 'good__price', product.price + '₽/кг')
  card.appendChild(price)
  
  return card;
}

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

var renderCards = function (arr) {
  for (var i = 0; i < arr.length; i++) {
    var card = createCard(arr[i]);
    
    var availabilityClass = 'good--available';
    if (!arr[i].inStock) {
      availabilityClass = 'good--unavailable'
    }
    card.classList.add(availabilityClass);
    
    if (arr[i].isHit) {
      card.classList.add('good--hit');
      var specialOffer = createElement('p', 'good__special-offer', arr[i].specialOffer);
      card.appendChild(specialOffer);
    }
    
    cardList.appendChild(card);
  }
}

renderCards(cardsData);

Sonia · 26.Июнь.2020 21:27:41

Какой-то интересный косяк при проверке - один и тот же код может 2 раза пройти проверку, а 3-й раз не пройти. Если не менять код, а поменять часть названий переменных - код тоже проверку перестает проходит

Pavel_Kruglik · 18.Январь.2021 07:48:40

Просьба к академии указать в техзадании, что цена равна object.price + ‘Р/кг’
не то, на что стоит тратить время.

Решение:

        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) {
 
  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 renderCards = function(itemsData) {
  var catalog = document.querySelector('.goods');
  for(var i = 0; i<itemsData.length; i++) {
    var item = createCard(itemsData[i]);
   catalog.append(item);
  }
}

renderCards(cardsData);

madixxon · 20.Май.2021 13:56:11

Рабочий вариант с пояснениями

//Функция создания элемента
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) {
  
  //Создание карточки li с классом .good
  var listItem = makeElement('li', 'good');
  
  //Создание заголовка карточки h2 с классом .good__description и текстом text
  var title = makeElement('h2', 'good__description', good.text)
  listItem.appendChild(title); //Добавление заголовка
  
  //Создание картинки img с классом .good__image
  var picture = makeElement ('img', 'good__image');
  picture.src = good.imgUrl;
  picture.alt = good.text;
  listItem.appendChild(picture); //Добавление картинки
  
  //Создание цены товара p с классом .good__price и ценой price + '₽/кг'
  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');
    //Если проверка проходит, создаём строку p с классом .good__special-offer и текстом specialOffer
    var goodHit = makeElement('p', 'good__special-offer', good.specialOffer);
    listItem.appendChild(goodHit);
}
//Возвращаем карточку
  return listItem;
}
//Находим список
var cardsList = document.querySelector('.goods');
//Наполняем каждую карточку с помощью функции renderCards данными из cardsData
for (var i = 0; i < cardsData.length; i++) {
  var cardItem = renderCards(cardsData[i]); 
  //Заполняем список
  cardsList.appendChild(cardItem);  
}