добавил новую фишку

index.html

@@ -235,5 +235,6 @@ <h2 class="success__title">Изображение успешно загруже
   <script type="module" src="js/main.js"></script>
   <script type="module" src="js/thumbnails.js"></script>
   <script type="module" src="js/data.js"></script>
+  <script type="module" src="js/full-size-images.js"></script>
 </body>
 </html>

js/data.js

@@ -1,5 +1,5 @@
 import {getRandomNumberFromInterval} from './util.js';
-const MESSAGES = ['', 'Всё отлично!В целом всё неплохо. Но не всё.',
+const MESSAGES = ['ты лозор', 'Всё отлично!В целом всё неплохо. Но не всё.',
   'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
   'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
   'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
@@ -12,7 +12,7 @@ const LikesCount = {
 };
 
 const getComments = (quantity, id) => new Array(quantity).fill('').map((_, messageId) => {
-  const mesIndex = getRandomNumberFromInterval(0, MESSAGES.length - 1);
+  const mesIndex = getRandomNumberFromInterval(1, MESSAGES.length - 1);
 
   return {
     id: `(${id}-${messageId})`,

js/full-size-images.js

@@ -0,0 +1,49 @@
+const bigPicture = document.querySelector('.big-picture');
+const commentsCount = bigPicture.querySelector('.comments-count');
+const likesCount = bigPicture.querySelector('.likes-count');
+const bigImage = bigPicture.querySelector('.big-picture__img img');
+const description = bigPicture.querySelector('.social__caption');
+
+const createComment = (avatar, name, text) => `<li class="social__comment">
+    <img
+        class="social__picture"
+        src="${avatar}"
+        alt="${name}"
+        width="35" height="35">
+    <p class="social__text">${text}</p>
+  </li>`;
+
+
+const createCommentsBlock = (comments) =>{
+  const commentsBlock = bigPicture.querySelector('.social__comments');
+  commentsBlock.innerHTML = '';
+  commentsBlock.insertAdjacentHTML('afterbegin', comments.map((comment) => createComment(comment.avatar, comment.name, comment.message)).join(''));           // Array(comments).map
+};
+
+
+const constructBigPicture = (picture, photos) =>{
+  const likes = picture.querySelector('.picture__likes');
+  const comments = picture.querySelector('.picture__comments');
+  const image = picture.querySelector('.picture__img');
+  const photoInfo = photos.find((photo) => `/${photo.url}` === new URL(image.src).pathname);
+  description.textContent = photoInfo.description;
+  likesCount.textContent = likes.textContent;
+  bigImage.src = image.src;
+  commentsCount.textContent = comments.textContent;
+  createCommentsBlock(photoInfo.comments, bigPicture);
+};
+
+
+export const showBigPicture = (photos) => {
+  const pictures = document.querySelectorAll('.picture');
+  for (const picture of pictures){
+    picture.onclick = () =>{
+      constructBigPicture(picture, photos);
+      bigPicture.classList.remove('hidden');
+      bigPicture.querySelector('.social__comment-count').hidden = true;
+      bigPicture.querySelector('.comments-loader').hidden = true;
+      document.body.classList.add('modal-open');
+    };
+  }
+};
+

js/main.js

@@ -1,7 +1,9 @@
 import {getPhotoDescriptions} from './data.js';
 import {thumbnailsRender} from './thumbnails.js';
+import {showBigPicture} from './full-size-images.js';
 
 const PHOTOS_COUNT = 25;
 
 const photos = getPhotoDescriptions(PHOTOS_COUNT);
 thumbnailsRender(photos);
+showBigPicture(photos);