Кекс остался доволен вашей работой и подкинул новую задачу: нужно добавить карточки товаров на страницу магазина селфи-палок.

Раньше мы получали данные о состояниях товара, в этот раз из выгрузки программы 1-Кекс будет приходить полная информация. Данные будут содержать название продукта, его цену, изображение, доступность для заказа и прочую информацию. Поэтому для решения задачи нам не нужен верстальщик, ведь все данные будут у нас. Мы сами добавим элементы в разметку с помощью скриптов.

Правда, программа 1-Кекс пока барахлит и не хочет отдавать выгрузку. Поэтому сначала, чтобы не терять время, мы создадим одну карточку с нуля. Верстальщик показал нам, как должны быть свёрстаны карточки товаров, поэтому сейчас в разметке они уже есть. Мы будем ориентироваться на эти карточки, создавая свою, а затем удалим и добавим все карточки самостоятельно.

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

Чтобы карточка оказалась в разметке, нужно найти родительский элемент, в который мы будем эту карточку добавлять. В нашем случае это список products. Именно в нём хранятся карточки товаров, и три из них уже есть в разметке. Мы можем найти их не только через querySelectorAll, но и с помощью свойства children списка products.

Обращение к свойству выглядит так: DOM-элемент.children. Это свойство возвращает коллекцию дочерних, то есть вложенных, DOM-элементов. В случае с нашим списком коллекция должна состоять из трёх элементов — по одному на каждый элемент списка li.

Перед добавлением новой карточки найдём список products и выведем в консоль список его дочерних элементов с помощью children. Убедимся, что длина коллекции равна количеству вложенных элементов, а уже затем начнём добавлять новую карточку.