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

Алгоритм добавления одной карточки не сильно отличается от добавления десяти или двадцати карточек. Мы точно так же создаём элементы, добавляем им классы, атрибуты и текстовое содержимое, только много раз. Конечно, без функции тут не обойтись.

Объявим функцию createCard, которая будет отвечать за создание карточки товара. Внутри функции будет создаваться элемент списка, а затем будут создаваться и «упаковываться» в него другие части карточки: заголовок, картинка товара и стоимость. Возвращать функция будет готовый DOM-элемент. Снаружи функции мы оставим поиск самого списка товаров и вставку в него DOM-элементов, возвращённых из функции.

Такое «разделение труда» сделает наш код более универсальным. Функция createCard «не знает» ничего о том, куда именно вставлять DOM-элемент товара, поэтому её можно повторно использовать где угодно без каких-либо правок. Например, можно вставлять созданные в функции карточки товаров в список спецпредложений или в совершенно другой список новинок.

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