23/23 не пролходит проверку

Ребята, объясните, пожалуйста, для тупых: почему не проходит проверку результат работы этого кода?

function createElement (tagName, className, text)
  {
    var element = document.createElement(tagName);
    element.classList.add(className);
    if (text)
      {
        element.textContent = text;
      };
    return element;
  };

function renderCards (data)
  {
    var
      cardList  = document.querySelector('ul')  ,
      card      /*  card of product     */      ,
      
      title     /*  key:  text          */      ,
      image     /*  key:  imgUrl        */      ,
      price     /*  key:  price         */      ,
      special   /*  key:  specialOffer  */      ;
    
    for (var i = 0; i < data.length; i++)
      {
        card  = createElement('li' , 'good');
        title = createElement('h2' , 'good__description', data[i].text);
        image = createElement('img', 'good__image',       data[i].text);
        price = createElement('p'  , 'good__price',       data[i].price);
        
        image.src = data[i].imgUrl;
        price.textContent += '₽/кг';
        
        card.appendChild(title);
        card.appendChild(image);
        card.appendChild(price);
        
        if (data[i].inStock)
          {
            card.classList.add('good--available');
          }
        else
          {
            card.classList.add('good--unavailable');
          };
        if (data[i].isHit)
          {
            card.classList.add('good--hit');
            special = createElement('p', 'good__special-offer', data[i].specialOffer);
            
            card.appendChild(special);
          };
        cardList.appendChild(card);
      };
  };

renderCards(cardsData);

И так, я через консоль браузера “вытащил” JS-код для своего решения и того, с которым сравниваются результаты. Скопировал оба и привёл в notepad++ к развёрнутому виду, и вот как они выглядят:

Мой:

function createElement(tagName, className, text)
	{
		try
			{
				var element = document.createElement(tagName);
				element.classList.add(className);
				if (text)
					{
						element.textContent = text;
					};
				return element;
			}
		catch (__err)
			{
				console.error(__err);
			}
	};

function renderCards(data)
	{
		try
			{
				var cardList = document.querySelector('ul'), card, title, image, price, special;
				for (var i = 0; i < data.length; i++)
					{
						__TO659.check();
						card = createElement('li', 'good');
						title = createElement('h2', 'good__description', data[i].text);
						image = createElement('img', 'good__image', data[i].text);
						price = createElement('p', 'good__price', data[i].price);
						image.src = data[i].imgUrl;
						price.textContent += '₽/кг';
						card.appendChild(title);
						card.appendChild(image);
						card.appendChild(price);
						if (data[i].inStock)
							{
								card.classList.add('good--available');
							}
						else
							{
								card.classList.add('good--unavailable');
							};
						if (data[i].isHit)
							{
								card.classList.add('good--hit');
								special = createElement('p', 'good__special-offer', data[i].specialOffer);
								card.appendChild(special);
							};
						cardList.appendChild(card);
					};
			}
		catch (__err)
			{
				console.error(__err);
			}
	};

renderCards(cardsData);

От HTML Academy:

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++)
			{
				__TO405.check();
				var cardItem = createCard(goods[i]);
				cardList.appendChild(cardItem);
			}
	};

renderCards(cardsData);

Я, правда, с этим буду и дальше сидеть и разбираться, но пока что использую “оригинальный” код для решения.

у вас некорректно альт изображений прописывается. вы поместили текст внутрь контейнера img, а надо было альтом его разместить.
поправьте свой код, изменив свои строки на эти.

image.alt = data[i].text; //добавить
image = createElement('img', 'good__image'); //изменить

бтв, вы php до этого изучали?
красиво у вас код описан, очень нравится структурно

Упс… а про alt изображений я забыл…

Нет, до этого изучал C# и Pascal (последний в рамках школьной программы)

чувствуется влияние обоих =) от C# фигурные скобки,а от паскаля описание переменных в начале программы
(если что, описание переменных через запятую это плохой тон, также как и отделять блоки кода фигурными скобками, вместо этого в js открывающая скобка пишется на строчке модальной конструкции (if, while, for, function, etc.) - ну эт придираюсь прост, лечится бьютифаером кода).

И от Хауди Хо структура описания переменных в комментариях.

Про описание переменных через запятую учту.

Всё, теперь все проверки проходят.

И вот так теперь выглядит окончательный вариант кода:

function createElement (tagName, className, text)
  {
    var element = document.createElement(tagName);
    element.classList.add(className);
    if (text)
      {
        element.textContent = text;
      };
    return element;
  };

function renderCards (data)
  {
    var
      cardList  = document.querySelector('ul')  ,
      card      /*  card of product     */      ,
      
      title     /*  key:  text          */      ,
      image     /*  key:  imgUrl        */      ,
      price     /*  key:  price         */      ,
      special   /*  key:  specialOffer  */      ;
    
    for (var i = 0; i < data.length; i++)
      {
        card  = createElement('li' , 'good');
        image = createElement('img', 'good__image');
        title = createElement('h2' , 'good__description', data[i].text);
        price = createElement('p'  , 'good__price',       data[i].price);
        
        image.alt = data[i].text;
        image.src = data[i].imgUrl;
        price.textContent += '₽/кг';
        
        card.appendChild(title);
        card.appendChild(image);
        card.appendChild(price);
        
        if (data[i].inStock)
          {
            card.classList.add('good--available');
          }
        else
          {
            card.classList.add('good--unavailable');
          };
        if (data[i].isHit)
          {
            card.classList.add('good--hit');
            special = createElement('p', 'good__special-offer', data[i].specialOffer);
            
            card.appendChild(special);
          };
        
        cardList.appendChild(card);
      };
  };

renderCards(cardsData);

Спасибо за помощь!