Merge pull request #6 from KateSolodchuk/module7-task1

htmlacademy-javascript · Nov 23, 2024 · ad5b007 · ad5b007
2 parents 22f26cb + 42bed0c
commit ad5b007
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/js/main.js b/js/main.js
@@ -1,4 +1,5 @@
 import './util.js';
 import {CreatePhotoList} from './data.js';
+import './thumbnails.js';
 
 console.log(CreatePhotoList());
diff --git a/js/thumbnails.js b/js/thumbnails.js
@@ -0,0 +1,22 @@
+import {CreatePhotoList} from './data.js';
+
+const pictures = document.querySelector('.pictures');
+const thumbnailsTemplate = document.querySelector('#picture')
+  .content
+  .querySelector('.picture');
+
+const usersThumbnails = CreatePhotoList ();
+
+const usersThumbnailsFragment = document.createDocumentFragment();
+
+usersThumbnails.forEach((photo) => {
+  const usersElement = thumbnailsTemplate.cloneNode(true);
+  usersElement.querySelector('.picture__img').src = photo.url;
+  usersElement.querySelector('.picture__img').alt = photo.description;
+  usersElement.querySelector('.picture__likes').textContent = photo.likes;
+  usersElement.querySelector('.picture__comments').textContent = photo.comments.length;
+  usersThumbnailsFragment.appendChild(usersElement);
+});
+
+pictures.appendChild(usersThumbnailsFragment);
+