делает промежуточную проверку

js/fullSize.js

@@ -2,6 +2,14 @@ import { isEscapeKey, isEnterKey } from './util.js';
 
 const userBigPicture = document.querySelector('.big-picture');
 const userBigPictureCancel = document.querySelector('.big-picture__cancel');
+const likesCounter = userBigPicture.querySelector('.likes-count');
+const fullPicture = document.querySelector('.big-picture__img');
+const pictureUrl = fullPicture.querySelector('img');
+const socialCommentTotalCount = document.querySelector('.social__comment-total-count');
+const socialCommentCount = document.querySelector('.social__comment-count');
+const description = document.querySelector('.social__caption');
+const commentsLoader = document.querySelector('.comments-loader');
+
 
 const onBigPictureKeydown = (evt) => {
   if (isEscapeKey(evt)) {
@@ -12,13 +20,34 @@ const onBigPictureKeydown = (evt) => {
 
 function openBigPicture() {
   userBigPicture.classList.remove('hidden');
-
+  // body.classList.add('modal-open');
   document.addEventListener('keydown', onBigPictureKeydown);
 }
 
+// const socialComments = document.querySelector('.social__comments');
+
+// comments.forEach((comment) => {
+//   const commentElement = document.createElement('li');
+//   commentElement.classList.add('social__comment');
+
+//   const avatarImg = document.createElement('img');
+//   avatarImg.classList.add('social__picture');
+//   avatarImg.src = comment.avatar;
+//   avatarImg.alt = comment.name;
+
+//   const textElement = document.createElement('p');
+//   textElement.classList.add('social__text');
+//   textElement.textContent = comment.text;
+
+//   commentElement.appendChild(avatarImg);
+//   commentElement.appendChild(textElement);
+
+//   socialComments.appendChild(commentElement);
+// });
+
 function closeBigPicture() {
   userBigPicture.classList.add('hidden');
-
+  // body.classList.remove('modal-open');
   document.removeEventListener('keydown', onBigPictureKeydown);
 }
 
@@ -32,4 +61,4 @@ userBigPictureCancel.addEventListener('keydown', (evt) => {
   }
 });
 
-export { openBigPicture, closeBigPicture };
+export { openBigPicture, closeBigPicture, userBigPicture };

js/thumbnails.js

@@ -1,5 +1,5 @@
 import { createPosts } from './data.js';
-import { openBigPicture } from './fullSize.js';
+import { openBigPicture, userBigPicture } from './fullSize.js';
 
 const templateUserPicture = document.querySelector('#picture')
   .content
@@ -12,12 +12,13 @@ const containerUsersPictures = document.querySelector('.pictures');
 const renderUsersPictures = () => {
   const usersPicturesFragment = document.createDocumentFragment();
 
-  usersPictures.forEach(({ url, description, likes, comments }) => {
+  usersPictures.forEach(({ url, description, likes, comments, id }) => {
     const userPicture = templateUserPicture.cloneNode(true);
     userPicture.querySelector('.picture__img').src = url;
     userPicture.querySelector('.picture__img').alt = description;
     userPicture.querySelector('.picture__likes').textContent = likes;
     userPicture.querySelector('.picture__comments').textContent = comments.length;
+    userPicture.dataset.id = id;
     usersPicturesFragment.append(userPicture);
   });
 
@@ -28,7 +29,10 @@ const renderUsersPictures = () => {
 const pictureHandler = () => {
   const pictures = document.querySelectorAll('.picture');
   pictures.forEach((picture) => {
-    picture.addEventListener('click', () => {
+    picture.addEventListener('click', (event) => {
+      const currentPicture = usersPictures.find((photo) => event.currentTarget.dataset.id === photo.id.toString());
+      userBigPicture.querySelector('.big - picture__img img').src = currentPicture.url;
+      userBigPicture.querySelector('.social__comment-shown-count').textContent = currentPicture.comments.length;
       openBigPicture();
     });
   });