Знакомство с JavaScript в браузере 23/23

Курсы JavaScript в браузере
1 
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 (array) {
    var product = makeElement('li', 'good');
    
    var availabilityClass = 'good--available';
    if(!array.inStock) {
      availabilityClass = 'good--unavailable';
    }
    product.classList.add(availabilityClass);
    
    
    var title = makeElement('h2', 'good__description', array.text);
    product.appendChild(title);
    
    var image = makeElement('img', 'good__image', array.text);
    image.src = array.imgUrl;
    image.alt = array.text;
    product.appendChild(image);
  
    var price = makeElement('p', 'good__price', array.price + '₽/кг');
    product.appendChild(price);
    
    if(array.isHit) {
      product.classList.add('good--hit');
    };
    
    if(array.specialOffer) {
      var specialOffer = makeElement('p', 'good__special-offer', array.specialOffer);
      product.appendChild(specialOffer);
    };
    return product;
};

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

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

renderCards(cardsData);

Все работает, но в компиляторе пишет что не совпадает, посмотрите пожалуйста в чем может быть ошибка?

3

поправьте так:

var image = makeElement('img', 'good__image');

ну и чисто придираясь, не array, a object :sweat_smile:

1 лайк
4

Добрый день! Подскажите, пожалуйста, что не так в моем коде (забегая вперед, уточню, что еще не приводил его к итоговому виду, который был показан в уроках, сделал простым способом - если проблема в этом, напишите, пожалуйста, так как отображение идет адекватное):

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 goods = document.querySelector(’.goods’);

var renderCards = function(array) {

var item = document.createElement(‘li’);
item.classList.add(‘good’);
if(array.inStock) {
item.classList.add(‘good–available’)
} else {
item.classList.add(‘good–unavailable’);
}
goods.appendChild(item);

var header = document.createElement(‘h2’);
header.classList.add(‘good__description’);
header.textContent = array.text;
item.appendChild(header);

var img = document.createElement(‘img’);
img.classList.add(‘good__image’);
img.src = array.imgUrl;
img.alt = array.text;
item.appendChild(img);

var hex = String.fromCharCode(‘8381’);

var price = document.createElement(‘p’);
price.classList.add(‘good__price’);
price.textContent = array.price + hex + ‘/кг’;
item.appendChild(price);

if(array.isHit) {
item.classList.add(‘good–hit’);
}

var specialOffer = document.createElement(‘p’);
specialOffer.textContent = array.specialOffer;
if(item.classList.contains(‘good–hit’)){
specialOffer.classList.add(‘good__special-offer’);
}
item.appendChild(specialOffer);

console.log(goods)
}
for (var i = 0; i < cardsData.length; i++){
renderCards(cardsData[i]);
}

5

сбросьте raw код

7

как я могу скинуть его как js код? Прошу прощения, не вижу эту функцию, почему-то не могу сообразить

8

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 goods = document.querySelector(’.goods’);

var renderCards = function(array) {

var item = document.createElement(‘li’);
item.classList.add(‘good’);
if(array.inStock) {
item.classList.add(‘good–available’)
} else {
item.classList.add(‘good–unavailable’);
}
goods.appendChild(item);

var header = document.createElement(‘h2’);
header.classList.add(‘good__description’);
header.textContent = array.text;
item.appendChild(header);

var img = document.createElement(‘img’);
img.classList.add(‘good__image’);
img.src = array.imgUrl;
img.alt = array.text;
item.appendChild(img);

var hex = String.fromCharCode(‘8381’);

var price = document.createElement(‘p’);
price.classList.add(‘good__price’);
price.textContent = array.price + hex + ‘/кг’;
item.appendChild(price);

if(array.isHit) {
item.classList.add(‘good–hit’);
}

var specialOffer = document.createElement(‘p’);
specialOffer.textContent = array.specialOffer;
if(item.classList.contains(‘good–hit’)){
specialOffer.classList.add(‘good__special-offer’);
}
item.appendChild(specialOffer);

console.log(goods)
}
for (var i = 0; i &lt; cardsData.length; i++){
renderCards(cardsData[i]);
}
10

спасибо!

11

очень забавно, что вы скопировали с форума код и решили его же сюда прикрепить. я не для этого запрашивал код. форум меняет форматирование кода, в частности кавычки, lt и gt, а тут вы их очень часто использовали, из-за этого код ваш все еще не является валидным. я не могу его скопировать и протестить.

12 
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 goods = document.querySelector('.goods');

var renderCards = function(array) {
  
  var item = document.createElement('li');
  item.classList.add('good');
  if(array.inStock) {
    item.classList.add('good--available')
    } else {
      item.classList.add('good--unavailable');
    }
  goods.appendChild(item);
    
  var header = document.createElement('h2');
  header.classList.add('good__description');
  header.textContent = array.text;
  item.appendChild(header);
  
  var img = document.createElement('img');
  img.classList.add('good__image');
  img.src = array.imgUrl;
  img.alt = array.text;
  item.appendChild(img);
  
  var hex = String.fromCharCode('8381');
  
  var price = document.createElement('p');
  price.classList.add('good__price');
  price.textContent = array.price + hex + '/кг';
  item.appendChild(price);
  
  if(array.isHit) {
  item.classList.add('good--hit');
  }
  
  var specialOffer = document.createElement('p');
  specialOffer.textContent = array.specialOffer;
  if(item.classList.contains('good--hit')){
    specialOffer.classList.add('good__special-offer');
  }
  item.appendChild(specialOffer);
}
for (var i = 0; i < cardsData.length; i++){
  renderCards(cardsData[i]);
  }
13

у вас безусловно создается пустой абзац там, где отсутствует специальное предложение, т.е. там, где для cardsData[i] specialOffer не описан.
решение простое - засунуть item.appendChild(specialOffer); внутрь условия (сразу после specialOffer.classList.add('good__special-offer'); )

у меня такое ощущение, что вы неверно понимаете как все работает, потому что параметр нельзя было назвать array, т.к. это все таки i-ый объект из массива (который является объектом со свойствами), а не сам массив.
также, решение с hex не считаю правильным, достаточно было бы достать этот символ и вставить его как строку, а не искать в юникоде. тем более, что он был в ТЗ и так.

14

понял Вас, спасибо! хочу еще доработать код, вижу много изъянов, в том числе некоторые названия, поэтому спасибо за Ваши корректировки!