Испытание мороженым (9/23)

Курсы JavaScript в браузере
1

image
image.png812×325 7.93 KB

var assortmentData = [
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
},
{
inStock: true,
isHit: true
},
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
}
];

var updateCards = function(items) {
var collection = document.querySelectorAll(".good");

for (var i = 0; i < items.length; i++) {
var item = items[i];

if (item.inStock) {
collection[i].classList.add(“good–available”);
} else {
collection[i].classList.add(“good–unavailable”);
}
if (item.isHit) {
collection[i].classList.add(“good–hit”);
}
}
};

updateCards(assortmentData);

Не могу понять в чём ошибка, ведь всё нормально отображается

image
image.jpg704×701 143 KB

3 лайка
2

Та же самая ошибка, как пофиксить? Who know?

var updateCards = function(elements) {
var goods = document.querySelectorAll(’.good’);
for(var i = 0; i < goods.length; i++) {
var good = goods[i];
console.log(good);

  var element = elements[i];
  console.log(element);
  
  if(element.inStock) {
    good.classList.add('good--available');
    }
  if(!element.inStock) {
    good.classList.add('good--unavailable');
    } 
  if(element.isHit) {
    good.classList.add('good--hit');
    } 
  }

};

updateCards(assortmentData);

3

Та же печаль.

`var updateCards = function (products) {
var elements = document.querySelectorAll(’.good’);

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

var product = products[i];

if(product.inStock){
  elements[i].classList.add('good--available');}
  else {elements[i].classList.add('good--unavailable');};
  
if (product.isHit){
  elements[i].classList.add('good--hit');
  };

};
};
updateCards(assortmentData);`

4

В варианте, предложенном в видеоинструкции тоже не работает.

var updateCards = function (products) {

var elements = document.querySelectorAll(’.good’);

for (var i = 0; i < products.length; i++) {
var element=elements[i];
var product = products[i];
var availabilityClass=‘good–unavailable’;
if(product.inStock){
availabilityClass=‘good–available’;};
element.classList.add(availabilityClass);
if (product.isHit){
element.classList.add(‘good–hit’);
};
};
};
updateCards(assortmentData);

5

Спасибо всем за информацию! Мы уже решаем эту проблему. Приносим извинения за неудобства.

6

Что не так в коде? Ответы совпадают с входными данными при проверке задачи(видно по всем изображениям), но пишет , что тесты не пройдены.

var assortmentData = [
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
},
{
inStock: true,
isHit: true
},
{
inStock: true,
isHit: false
},
{
inStock: false,
isHit: false
}
];

var updateCards = function(mass){
var products = document.querySelectorAll(".good");

for(var i = 0; i < products.length; i++){
products[i].classList.add(“good–available”);

if(!assortmentData[i].inStock){
  products[i].classList.add("good--unavailable");
}


if(assortmentData[i].isHit == true){
  products[i].classList.add("good--hit");
}

}

};
updateCards(assortmentData);

7

Результат на изображении на самом деле не совпадает — лейблов «В наличии» нет. Опечатка в названии класса good--available. Кроме этого вместо конкретного объекта assortmentData нужно использовать параметр mass внутри функции и изменить логику задания классов, отвечающих за наличие товара — реализовать через ветку else. Вот такой код в итоге получится:

var updateCards = function(mass) {
var products = document.querySelectorAll(".good");

for (var i = 0; i < mass.length; i++) {
if (!mass[i].inStock) {
  products[i].classList.add("good--unavailable");
} else {
  products[i].classList.add("good--available");
}

if (mass[i].isHit == true) {
  products[i].classList.add("good--hit");
}
}
}

updateCards(assortmentData);
8

Спасибо большое. Исправила только последнее ваше замечание и тесты сразу прошли ( передачу в функцию неправильного аргумента). Опечатки вроде не было. По поводу ветки else ? изначально я иду от противного, что все товары в наличии. И если inStock false, то меняю класс. В общем тесты пройдены. Спасибо за помощь.

1 лайк
9

Добрый день! У меня были несколько вариантов и к сожалению все не прошли проверку. Как быть?
Вот последний, списанный “слово в слово”(может быть что-то местами поменял) с решения и он тоже не проходит. Но когда смотришь на результат - то все идентично. Помогите, а?

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 createCard = function(good) {
var listItem = makeElement(‘li’, ‘good’);

var picture = makeElement(‘img’, ‘good__image’);
picture.src = good.imgUrl;
picture.alt = good.text;
listItem.appendChild(picture);

var title = makeElement(‘h2’, ‘good__description’, good.text);
listItem.appendChild(title);

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 specialOffer = makeElement(‘p’, ‘good__special-offer’, good.specialOffer);
listItem.appendChild(specialOffer);
}

return listItem;
};

var renderCards = function(goods){
var cardList = document.querySelector(’.goods’);

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

};

renderCards(cardsData);

10

В названии ветки неверно указано задание — это 23 в этой же главе «Мороженое. Возвращение».

В вашем коде не соблюдена последовательность добавления элементов, указанная в карточке товара в задании — сначала должен быть добавлен title, а затем picture. В этом случае код пройдёт проверку.

11

ОГО! Это так важно для кода(я имею ввиду в реально разработке)? или это важно для машины, которая проверяет?

12

Последовательность добавления элементов через appendChild влияет на порядок элементов в разметке, поэтому это важно. Плюс соответствие техническому заданию важно для любого реального проекта.

13

Мое решение, чуть упростил его в сравнении с примером, разобранным в материалах тренажера, убрав на мой взгляд лишние промежуточные переменные, которые лично мне только забивают оперативную память головного мозга:

var updateCards = function (assortmentData) {

var products = document.querySelectorAll(".good");

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

  if (assortmentData[i].inStock) {products[i].classList.add("good--available")};
  if (!assortmentData[i].inStock) {products[i].classList.add("good--unavailable")}; 
  if (assortmentData[i].isHit) {products[i].classList.add("good--hit")};    
}

}

updateCards (assortmentData)

14

Задание можно пройти и без функции, этого достаточно после массива:

const iceCreamCardsList = document.querySelectorAll('.good');
iceCreamCardsList.forEach((iceCreamCard, i) => {
  const iceCreamData = assortmentData[i];
if (iceCreamData.inStock) {
  iceCreamCard.classList.add('good--available');
} else {
  iceCreamCard.classList.add('good--unavailable');
}
if (iceCreamData.isHit) {
  iceCreamCard.classList.add('good--hit');
}
  });
1 лайк
15

Переписал учительский код. Проверку всё равно не проходит.Текст "как есть" (без применения форматирования)
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) {
var listItem = makeElement (‘li’, ‘good’);

var availabilityClass = ‘good–available’;
if (!good.inStock) {
availabilityClass = ‘good–unavailable’;
}
listItem.classList.add(availabilityClass);

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

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

return listItem;
}

var renderCards = function(goods) {
var cardList = document.querySelector(’.goods’);
for (var i = 0; i < goods.length; i++) {
var cardItem = createCard(goods[i]);
cardList.appendChild(cardItem);
}
};

renderCards(cardsData);

16

До сих пор эта проблема, что делать то?
Визуально всё работает

17

Ну и намучился же я с этим заданием. Взяло время дотумкать, что массив объектов, описывающих состояния товаров, никак не связан с реальными элементами на странице. То есть, внутри функции необходимо вызвать эти самые элементы из разметки и уже ИМ навешивать классы. Фух…

const updateCards = (arr) => {  
  const goods = document.querySelectorAll('.good');
  for (let i = 0; i < arr.length; i++) {
    arr[i].inStock ? goods[i].classList.add('good--available') : goods[i].classList.add('good--unavailable');
    arr[i].isHit ? goods[i].classList.add('good--hit') : goods[i];
  };
}

updateCards(assortmentData);
18 
var updateCards = function (cards) {
  var elements = document.querySelectorAll('.good');
  
  for (i = 0; i < cards.length; i++) {
    var element = elements[i];
    var card = cards[i];
    
    var avaliabilityClass = 'good--unavailable';
    if (card.inStock) {
      avaliabilityClass = 'good--available';
    }
    element.classList.add(avaliabilityClass);
    if (card.isHit) {
    element.classList.add('good--hit');  
  }
}
}

updateCards(assortmentData);

100%