Отрисуй меня полностью

js/data.js

@@ -32,23 +32,23 @@
 };
 
 // Создать один объект фотографию, включающий: ID, URL, description, likes and Comments
 const createPictureDescription = (i) => {
-  const randomId = getRandomInteger(1, PICTURE_COUNT);
+  // const randomId = getRandomInteger(1, PICTURE_COUNT);
   return {
-    id: i+1,
-    url: `photos/${i+1}.jpg`,
+    id: i + 1,
+    url: `photos/${i + 1}.jpg`,
     description: getRandomArrayElement(DESCRIPTIONS),
     likes: getRandomInteger(LIKE_MIN_COUNT, LIKE_MAX_COUNT),
     comments: createComments(),
   };
 };
 
-console.log(createPictureDescription());
+// console.log(createPictureDescription());
 
 // Создать массив из 25 фотографий
 const createPictures = () => Array.from({ length: PICTURE_COUNT }, (_, i) => createPictureDescription(i));
 
-console.log(createPictures());
+// console.log(createPictures());
 
 // Export
 export { createPictures };

js/main.js

@@ -1,7 +1,8 @@
 // Import
 import { createPictures } from './data.js';
+import './thumbnails.js';
 
 // Generate pictures data
 const pictures = createPictures();
 
 console.log(pictures);

js/thumbnails.js

@@ -0,0 +1,85 @@
+// !!! пожалуйста, не обращайте внимания на комментарии. Они для меня чтобы я помнила что в каком порядке я создавала
+
+
+// 1.импортируем модуль для генерации фотографий
+import { createPictures } from './data.js';
+
+// 2.контейнер куда будем вставлять похожие фотографии
+const similarPicturesList = document.querySelector('.pictures');
+
+// 3.нашли шаблон
+const similarPicturesTemplate = document.querySelector('#picture').content.querySelector('.picture');
+
+// // 4.клонировали содержимое шаблона
+// const pictureElement = similarPicturesTemplate.cloneNode(true);
+
+// // 5.вставили клонированную фотографию в контейнер для фотографий
+// similarPicturesList.appendChild(pictureElement);
+
+// 6.создаём массив для работы с похожими фотографиями
+const similarPictures = createPictures();
+
+// // 7.отрисуем шаблон в проходке по массиву с данными
+// similarPictures.forEach(() => {
+//   // 4.клонировали содержимое шаблона
+//   const pictureElement = similarPicturesTemplate.cloneNode(true);
+
+//   // 5.вставили клонированную фотографию в контейнер для фотографий
+//   similarPicturesList.appendChild(pictureElement);
+// });
+
+// 13.создадим DocumentFragment
+const similarListFragment = document.createDocumentFragment();
+
+
+// // 8.теперь надо шаблон наполнить данными
+// // 7.отрисуем шаблон в проходке по массиву с данными
+// similarPictures.forEach((picture) => {
+//   // 4.клонировали содержимое шаблона
+//   const pictureElement = similarPicturesTemplate.cloneNode(true);
+
+//   // 9.вставим данные в шаблон начнём с адреса фотографии
+//   pictureElement.querySelector('.picture__img').src = picture.url;
+
+//   // 10.вставим описание фотографии
+//   pictureElement.querySelector('.picture__img').alt = picture.description;
+
+//   // 11.вставим количество лайков
+//   pictureElement.querySelector('.picture__likes').textContent = picture.likes;
+
+//   // 12.вставим количество комментариев
+//   pictureElement.querySelector('.picture__comments').textContent = picture.comments;
+
+//   // 5.вставили клонированную фотографию в контейнер для фотографий
+//   similarPicturesList.appendChild(pictureElement);
+// });
+
+// 14.используем деструктуризацию параметров
+// 8.теперь надо шаблон наполнить данными
+// 7.отрисуем шаблон в проходке по массиву с данными
+similarPictures.forEach(({url,description, likes, comments}) => {
+  // 4.клонировали содержимое шаблона
+  const pictureElement = similarPicturesTemplate.cloneNode(true);
+
+  // 9.вставим данные в шаблон начнём с адреса фотографии
+  pictureElement.querySelector('.picture__img').src = url;
+
+  // 10.вставим описание фотографии
+  pictureElement.querySelector('.picture__img').alt = description;
+
+  // 11.вставим количество лайков
+  pictureElement.querySelector('.picture__likes').textContent = likes;
+
+  // 12.вставим количество комментариев
+  pictureElement.querySelector('.picture__comments').textContent = comments;
+
+  // // 5.вставили клонированную фотографию в контейнер для фотографий
+  // similarPicturesList.appendChild(pictureElement);
+
+  // 15.вставим элементы через DocumentFragment
+  similarListFragment.appendChild(pictureElement);
+});
+
+// 16.вынесем за функцию
+// 5.вставили клонированную фотографию в контейнер для фотографий
+similarPicturesList.appendChild(similarListFragment);