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

index.html

@@ -129,7 +129,6 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
             </div>
           </form>
         </div>
-      </section>
 
       <!-- Здесь будут изображения других пользователей -->
 
@@ -234,6 +233,7 @@ <h2 class="success__title">Изображение успешно загруже
   <script type="text/javascript" src="js/functions.js"></script>
   <script type="module" src="js/util.js"></script>
   <script type="module" src="js/main.js"></script>
+  <script type="module" src="js/thumbnails-renderer.js"></script>
   <script type="module" src="js/data.js"></script>
 </body>
 </html>

js/data.js

@@ -5,7 +5,6 @@ const MESSAGES = ['', 'Всё отлично!В целом всё неплохо
   'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
   'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'];
 const NAMES= ['Aboba', 'MegaGrib', 'Nagibator3000', 'Artem', 'Ghg', 'top_php_progger'];
-const PHOTOS_COUNT = 25;
 const MAX_COMMENTS_COUNT = 30;
 const LikesCount = {
   MIN: 15,
@@ -23,8 +22,8 @@ const getComments = (quantity, id) => new Array(quantity).fill('').map((_, messa
   };
 });
 
-export const getPhotoDescriptions = () =>
-  new Array(PHOTOS_COUNT).fill('').map((_, id) => ({
+export const getPhotoDescriptions = (photosCount) =>
+  new Array(photosCount).fill('').map((_, id) => ({
     id: id,
     url :`photos/${id}.jpg`,
     description : 'Мое придуманное описание',

js/main.js

@@ -1,3 +1,6 @@
 import {getPhotoDescriptions} from './data.js';
+import {thumbnailsRender} from './thumbnails-renderer.js';
 
-getPhotoDescriptions();
+const PHOTOS_COUNT = 26;
+const photos = getPhotoDescriptions(PHOTOS_COUNT);
+thumbnailsRender(photos);

js/thumbnails-renderer.js

@@ -0,0 +1,26 @@
+let photos = null;
+
+const NULL_INDEX = 0;
+const templatePicture = document.querySelector('#picture').content;
+const pictures = document.querySelector('.pictures');
+
+const getPicture = (photo) =>{
+  const picture = templatePicture.cloneNode(true);
+  const img = picture.querySelector('.picture__img');
+  img.src = photo.url;
+  img.alt = photo.description;
+  picture.querySelector('.picture__likes').textContent = photo.likes;
+  picture.querySelector('.picture__comments').textContent = photo.comments.length;
+  return picture;
+};
+
+export const thumbnailsRender = (data) =>{
+  photos = data.slice();
+  if(photos){
+    photos.forEach((photo, index) => {
+      if(index > NULL_INDEX){
+        pictures.appendChild(getPicture(photo));
+      }
+    });
+  }
+};