У меня была проблема в том, что был нарушен порядок элементов в карточке, долго возился с этим, визуально не отличается, потому что там в css задали order на некоторые элементы, вот такая ловушка. Мой рабочий код
var createElement = (elementName, elementClass, elementText) => {
var newElement = document.createElement(elementName);
newElement.classList.add(elementClass);
if (elementText) {
newElement.textContent = (elementText);
}
return (newElement);
}
var renderCards = (array) => {
var goods = document.querySelector('.goods');
array.forEach (value => {
var liGood = createElement('li', 'good');
if(value.inStock) {
liGood.classList.add('good--available');
}else{
liGood.classList.add('good--unavailable');
}
goods.append(liGood);
var h2Title = createElement('h2', 'good__description', value.text);
liGood.append(h2Title);
var img = createElement('img', 'good__image');
img.src = value.imgUrl;
img.alt = value.text;
liGood.append(img);
var pPrice = createElement('p', 'good__price', value.price + '₽/кг');
liGood.append(pPrice);
if (value.isHit) {
liGood.classList.add('good--hit');
var specialOffer = createElement('p', 'good__special-offer', value.specialOffer);
liGood.append(specialOffer);
}
//console.log(liGood);
});
}
renderCards(cardsData);
немного изменил логику, заменив универсальную функцию, на ту, которая обрабатывает только карточку товара, вроде код читабельнее вышел
let goods = document.querySelector('.goods')
let createElement = function(price, src ,text) {
let element = document.createElement('li')
element.classList.add('good')
let h2 = document.createElement('h2')
h2.classList.add('good__description')
h2.textContent = text
let img = document.createElement('img')
img.classList.add('good__image')
img.src = src
img.alt = text
let p = document.createElement('p')
p.classList.add('good__price')
p.textContent = `${price}₽/кг`
element.append(h2)
element.append(img)
element.append(p)
return element
}
let renderCards = function (data) {
let card = createElement(data.price, data.imgUrl, data.text)
let available = 'good--available'
if (!data.inStock) {
available = 'good--unavailable'
}
card.classList.add(available)
if (data.isHit) {
card.classList.add('good--hit')
let special = document.createElement('p')
special.classList.add('good__special-offer')
special.textContent = data.specialOffer
card.append(special)
}
return card
}
for (let cardData of cardsData) {
let good = renderCards(cardData)
goods.append(good)
}
////////////////
let creatElement = function (tag, className, text) {
let element = document.createElement(tag);
element.classList.add(className);
if (text){
element.textContent = text;
}
return element
};
////////////////
let renderCards = function (data){
let element = creatElement(‘li’, ‘good’);
let title = creatElement (‘h2’,‘good__description’, data.text);
element.appendChild(title);
Здравствуйте! Правильно ли я понимаю, что ваше решение не проходит проверку? Пришлите, пожалуйста, в ответ только ваш код, я посмотрю, что могло пойти не так. Пока трудно сориентироваться, какой код ваш, а какой не проходит проверку, хотя и должен
Здравствуйте
Решил задачу немного по своему, всё верно, просто интересно услышать мнение, насколько этот код валидный, стоит ли писать так
Разница в том, что мне не особо понравилось создавать миллион разных функций и я всё запихнул в одну
var list = document.querySelector('.goods');
var renderCards = function (dataList) {
for (i = 0; i < dataList.length; i++) {
var element = document.createElement('li');
element.classList.add('good');
if (dataList[i].inStock) {
element.classList.add('good--available')
} else {
element.classList.add('good--unavailable')
};
var header = document.createElement('h2');
header.classList.add('good__description');
header.textContent = dataList[i].text;
element.appendChild(header);
var image = document.createElement('img');
image.classList.add('good__image');
image.src = dataList[i].imgUrl;
image.alt = dataList[i].text
element.appendChild(image);
var price = document.createElement('p');
price.classList.add('good__price');
price.textContent = dataList[i].price + '₽/кг';
element.appendChild(price);
if(dataList[i].isHit) {
element.classList.add('good--hit');
var specPrice = document.createElement('p');
specPrice.classList.add('good__special-offer');
specPrice.textContent = dataList[i].specialOffer;
element.appendChild(specPrice);
}
list.appendChild(element);
};
};
renderCards(cardsData);
Я так смотрю, многие предлагают рабочий код, правила написания которого мы не проходили в рамках курса. Если успеваете что-то на стороне изучить это круто!!! Я к сожалению, код с бумажкой убористым подчерком посимвольно разбирал. Только на следующий день стал понимать последовательность и логику, и смог самостоятельно выдать результат (без подглядываний). Звучит может, смешно. Однако для меня, это результат!, на текущем уровне.
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 (elementData) {
var card = createElement('li', 'good')
var title = createElement('h2', 'good__description', elementData.text)
card.appendChild(title)
var picture = createElement('img', 'good__image')
picture.src = elementData.imgUrl
picture.alt = elementData.text
card.appendChild(picture)
var price = createElement('p', 'good__price', elementData.price + '₽/кг')
card.appendChild(price)
var cardClass = 'good--available'
if (!elementData.inStock) {
cardClass = 'good--unavailable'
}
card.classList.add(cardClass)
if (elementData.isHit) {
card.classList.add('good--hit')
var hitClass = createElement('p', 'good__special-offer', elementData.specialOffer)
card.appendChild(hitClass)
}
return card
}
var cardsList = document.querySelector('.goods')
for(var i = 0; i < cardsData.length; i++) {
var cardItem = renderCards(cardsData[i])
cardsList.appendChild(cardItem)
}
Я думаю, это ошибка на стороне платформы. У них весь этот урок используются var для объявления переменных и функций вместо let. А у вас как раз let используется.
function renderCards(cardsData) {
var goodsList = document.querySelector('.goods'); // Получаем список товаров
// Проходимся по массиву данных и создаем карточки мороженого
for (var i = 0; i < cardsData.length; i++) {
var cardData = cardsData[i]; // Получаем данные одного товара
var cardElement = document.createElement('li'); // Создаем элемент списка
cardElement.classList.add('good'); // Добавляем класс 'good' к элементу списка
// Создаем элемент заголовка с названием товара
var titleElement = document.createElement('h2');
titleElement.classList.add('good__description'); // Добавляем класс 'good__description' к заголовку
titleElement.textContent = cardData.text; // Устанавливаем текст заголовка из данных
cardElement.appendChild(titleElement); // Добавляем заголовок в карточку
// Создаем элемент изображения товара
var imgElement = document.createElement('img');
imgElement.classList.add('good__image'); // Добавляем класс 'good__image' к изображению
imgElement.src = cardData.imgUrl; // Устанавливаем ссылку на изображение из данных
imgElement.alt = cardData.text; // Устанавливаем атрибут 'alt' изображения равным названию товара
cardElement.appendChild(imgElement); // Добавляем изображение в карточку
// Создаем элемент цены товара
var priceElement = document.createElement('p');
priceElement.classList.add('good__price'); // Добавляем класс 'good__price' к цене
priceElement.textContent = cardData.price + '₽/кг'; // Устанавливаем текст цены из данных
cardElement.appendChild(priceElement); // Добавляем цену в карточку
// Проверяем доступность товара и добавляем соответствующий класс
if (cardData.inStock) {
cardElement.classList.add('good--available');
} else {
cardElement.classList.add('good--unavailable');
}
// Проверяем, является ли товар хитом продаж и добавляем соответствующий класс
if (cardData.isHit) {
cardElement.classList.add('good--hit');
// Создаем элемент специального предложения только для хита продаж
if (cardData.specialOffer) {
var specialOfferElement = document.createElement('p');
specialOfferElement.classList.add('good__special-offer'); // Добавляем класс 'good__special-offer' к специальному предложению
specialOfferElement.textContent = cardData.specialOffer; // Устанавливаем текст специального предложения из данных
cardElement.appendChild(specialOfferElement); // Добавляем специальное предложение в карточку
}
}
goodsList.appendChild(cardElement); // Добавляем карточку в список товаров
}
}
renderCards(cardsData);
// Вызываем функцию renderCards, передавая ей массив данных cardsData
