From 1432bba37b34f536a6c894a46a0649ddc47bf8f4 Mon Sep 17 00:00:00 2001
From: Anastasiia Kononova <bjko.smsng@gmail.com>
Date: Sat, 25 Apr 2026 16:07:04 +0300
Subject: [PATCH] add miniatures render

---
 js/main.js       |  5 +++--
 js/thumbnails.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 js/thumbnails.js

diff --git a/js/main.js b/js/main.js
index 919bb47..7e9d33a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,3 +1,4 @@
-import { createPhotos } from './generate-data';
+import { renderThumbnails } from './thumbnails.js';
+
+renderThumbnails();
 
-createPhotos();
diff --git a/js/thumbnails.js b/js/thumbnails.js
new file mode 100644
index 0000000..ce7d5c6
--- /dev/null
+++ b/js/thumbnails.js
@@ -0,0 +1,28 @@
+import { createPhotos } from './generate-data';
+export const renderThumbnails = () => {
+  const photos = createPhotos();
+
+  const photoTemplate = document.querySelector('#picture').content;
+  const photoContainer = document.querySelector('.pictures');
+
+  const renderPhoto = (element) => {
+    const newPhotoTemplate = photoTemplate.cloneNode(true);
+    const image = newPhotoTemplate.querySelector('.picture__img');
+    image.src = element.url;
+    image.alt = element.description;
+    const comments = newPhotoTemplate.querySelector('.picture__comments');
+    comments.textContent = element.comments.length;
+    const likes = newPhotoTemplate.querySelector('.picture__likes');
+    likes.textContent = element.likes;
+    return newPhotoTemplate;
+  };
+
+  const fragment = new DocumentFragment();
+
+  photos.forEach((photo) => {
+    const element = renderPhoto(photo);
+    fragment.append(element);
+  });
+
+  photoContainer.append(fragment);
+};