Merge pull request #5 from Elvira-Nikolenko/module7-task1

Author: keksobot

js/main.js

@@ -1,3 +1,5 @@
+import './thumbnails';
+
 const MIN_COUNT_ID = 1;
 const MAX_COUNT_ID = 25;
 const MAX_LENGTH_IMAGES = 25;
@@ -71,7 +73,7 @@ function getCommentsList(maxLength) {
   return commentsList;
 }
 
-function getImageList(maxLength = MAX_LENGTH_IMAGES) {
+export function getImageList(maxLength = MAX_LENGTH_IMAGES) {
   const imagesList = [];
 
   for (let i = 0; i < maxLength; i++) {

js/thumbnails.js

@@ -0,0 +1,32 @@
+import {getImageList} from './main';
+
+const miniature = document.querySelector('#picture').content;
+
+const renderMiniature = (dataUser) => {
+  const newMiniature = miniature.cloneNode(true);
+  const imagePath = newMiniature.querySelector('.picture__img');
+  const likes = newMiniature.querySelector('.picture__likes');
+  const comments = newMiniature.querySelector('.picture__comments');
+
+  imagePath.src = dataUser.url;
+  likes.textContent = dataUser.likes;
+  comments.textContent = dataUser.comments.length;
+
+  return newMiniature;
+};
+
+const fragment = document.createDocumentFragment();
+const imageList = getImageList();
+
+const renderListMiniature = (list) => {
+  list.forEach((image) => {
+    fragment.appendChild(renderMiniature(image));
+  });
+
+  const pictureContainer = document.querySelector('.pictures');
+  if (pictureContainer) {
+    pictureContainer.appendChild(fragment);
+  }
+};
+
+renderListMiniature(imageList);