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

index.html

@@ -7,7 +7,6 @@
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
-  <script head="text/javascript" src="js/functions.js"></script>
   <script src="js/main.js" type="module"></script>
 </head>
 

js/data.js

@@ -1,4 +1,4 @@
-import { createIdGenerator, getRandomInteger, getRandomArrayElement } from './util';
+import { createIdGenerator, getRandomInteger, getRandomArrayElement } from './util.js';
 
 const COMMENT_MESSAGES = [
   'Всё отлично!',

js/main.js

@@ -1,3 +1 @@
-import { createArrayPhotos } from './data';
-
-createArrayPhotos();
+import './miniaturePicture.js';

js/miniaturePicture.js

@@ -0,0 +1,35 @@
+import { createArrayPhotos } from './data.js';
+
+const photosData = createArrayPhotos();
+
+const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
+
+const picturesFragmetn = document.querySelector('.pictures');
+
+function createMiniPicture(currentPhoto) {
+  const clonePicture = pictureTemplate.cloneNode(true);
+  const imgClonePicture = clonePicture.querySelector('.picture__img');
+
+  imgClonePicture.src = currentPhoto.url;
+  imgClonePicture.alt = currentPhoto.description;
+
+  const pictureInfo = clonePicture.querySelector('.picture__info');
+  pictureInfo.querySelector('.picture__likes').textContent = currentPhoto.likes;
+  pictureInfo.querySelector('.picture__comments').textContent = currentPhoto.comments.length;
+
+  return clonePicture;
+}
+
+function startCreateMiniPicture(photosArray) {
+  const pictureListFragment = document.createDocumentFragment();
+
+  for (let i = 0; i < photosArray.length; i++) {
+    const clonePicture = createMiniPicture(photosArray[i]);
+    pictureListFragment.appendChild(clonePicture);
+  }
+
+  picturesFragmetn.appendChild(pictureListFragment);
+}
+
+startCreateMiniPicture(photosData);
+

js/util.js

@@ -1,5 +1,5 @@
 function createIdGenerator() {
-  let lastGeneratedId = 0;
+  let lastGeneratedId = 1; // тут 1, вместо 0, т.к. имена фотографий начинаются с 1, а не с 0
 
   return function() {
     return lastGeneratedId++;