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

index.html

@@ -137,7 +137,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
     </section>
 
     <!-- Полноэкранный показ изображения -->
-    <section class="big-picture  overlay  hidden">
+    <section class="big-picture  overlay hidden">
       <h2 class="big-picture__title  visually-hidden">Просмотр фотографии</h2>
       <div class="big-picture__preview">
 

js/functions.js

@@ -29,21 +29,21 @@
 // getNumber();
 
 
-// Функция из Доп.задания пятого раздела ДЗ.
+// // Функция из Доп.задания пятого раздела ДЗ.
 
-const timeWorking = (timeStart, timeEnd, timeMeet, duration) => {
-  let start = timeStart.split(':');
-  start = (parseInt(start[0], 10) * 60) + parseInt(start[1], 10);
+// const timeWorking = (timeStart, timeEnd, timeMeet, duration) => {
+//   let start = timeStart.split(':');
+//   start = (parseInt(start[0], 10) * 60) + parseInt(start[1], 10);
 
-  let end = timeEnd.split(':');
-  end = (parseInt(end[0], 10) * 60) + parseInt(end[1], 10);
+//   let end = timeEnd.split(':');
+//   end = (parseInt(end[0], 10) * 60) + parseInt(end[1], 10);
 
-  let meet = timeMeet.split(':');
-  meet = (parseInt(meet[0], 10) * 60) + parseInt(meet[1], 10);
+//   let meet = timeMeet.split(':');
+//   meet = (parseInt(meet[0], 10) * 60) + parseInt(meet[1], 10);
 
-  return !!(start <= meet + duration && meet + duration <= end);
+//   return !!(start <= meet + duration && meet + duration <= end);
 
-};
-console.log(timeWorking('8:00', '17:30', '14:00', 212));
+// };
+// console.log(timeWorking('8:00', '17:30', '14:00', 212));
 
 // Алексей подскажи как тут лучше всего сделать рефакторинг?

js/generator.js

@@ -33,7 +33,7 @@ const MESSAGES = [
   'Лица у людей на фотке перекошены, как будто их избивают., Как можно было поймать такой неудачный момент?!'
 ];
 
-const PHOTO_COUNT = 25;
+const PHOTO_COUNT = 26;
 
 const createIdGenirator = () => {
   let currentId = 0;
@@ -43,7 +43,7 @@ const createIdGenirator = () => {
 
 const generatePhotoId = createIdGenirator();
 const generateCommentsId = createIdGenirator();
-const generateUrl = createIdGenirator();
+
 
 const createComentsPhoto = () => ({
   id: generateCommentsId(),
@@ -54,11 +54,10 @@ const createComentsPhoto = () => ({
 
 const createPhoto = () => ({
   id: generatePhotoId(1, 25),
-  url: `photos/${generateUrl(1, 25)}.jpg`,
+  url: `photos/${getRandomInteger(1, 25)}.jpg`,
   description: getRandomArrayElement(DESCRIPTIONS),
-  likes: getRandomInteger(15, 200),
-  comments: Array.from({ length: getRandomInteger(0, 30) }, createComentsPhoto)
-});
+  comments: Array.from({ length: getRandomInteger(0, 30) }, createComentsPhoto),
+  likes: getRandomInteger(15, 200)});
 
 const generatePhotos = () => Array.from({ length: PHOTO_COUNT }, createPhoto);
 

js/main.js

@@ -1,3 +1,7 @@
-import { generatePhotos } from './generator.js';
+import { generatePhotos } from './generator';
+import { renderThumbnails } from './render-thumbnails';
+
+const photos = generatePhotos();
+renderThumbnails(photos);
+
 
-console.log(generatePhotos());

js/render-thumbnails.js

@@ -0,0 +1,22 @@
+const usersPhotoList = document.querySelector('.pictures');
+const thumbnails = document.querySelector('#picture').content.querySelector('.picture');
+
+const renderThumbnails = (userPhoto) => {
+  const photoFragment = document.createDocumentFragment();
+
+  userPhoto.forEach(({id, url, description, comments, likes }) => {
+    const photoElement = thumbnails.cloneNode(true);
+
+    photoElement.dataset.pictureId = id;
+    photoElement.querySelector('.picture__img').src = url;
+    photoElement.querySelector('.picture__img').alt = description;
+    photoElement.querySelector('.picture__comments').textContent = comments.length;
+    photoElement.querySelector('.picture__likes').textContent = likes;
+
+    photoFragment.append(photoElement);
+  });
+
+  usersPhotoList.append(photoFragment);
+};
+
+export { renderThumbnails };

js/util.js

@@ -7,4 +7,8 @@ const getRandomInteger = (min, max) => {
 
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
-export { getRandomInteger, getRandomArrayElement };
+const isEscapeKey = (evt) => evt.key === 'Escape';
+const isEnterKey = (evt) => evt.key === 'Enter';
+
+
+export { getRandomInteger, getRandomArrayElement, isEscapeKey, isEnterKey };