Открывается и закрывается

index.html

@@ -129,7 +129,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
             </div>
           </form>
         </div>
-      </section class ="pictures">
+      </section>
 
       <!-- Здесь будут изображения других пользователей -->
 

js/cards.js

@@ -4,7 +4,7 @@
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
 export const renderPictures = (photos) => {
   console.log('Всего фоток:', photos.length);
   const fragment = document.createDocumentFragment();
 
   photos.forEach((photo) => {
@@ -18,15 +18,14 @@
     likes.textContent = photo.likes;
     comments.textContent = photo.comments.length;
 
-    picture.addEventListener('click', (evt) => {
+
+   picture.addEventListener('click', (evt) => {
       evt.preventDefault();
-      console.log('!!!')
       openModal(photo);
-    });
+  });
 
     fragment.appendChild(picture);
   });
 
   picturesContainerNode.appendChild(fragment);
 };
-

js/main.js

@@ -4,4 +4,3 @@ import { getPhotos } from './photos.js';
 
 const photos = getPhotos(PHOTOS_COUNT);
 renderPictures(photos);
-

js/modal.js

@@ -1,8 +1,75 @@
+
+
 const modalNode = document.querySelector('.big-picture');
+const imgContainer = modalNode.querySelector('.big-picture__img');
+const bigPictureImg = imgContainer.querySelector('img');
+const likesCount = modalNode.querySelector('.likes-count');
+const commentsShownCount = modalNode.querySelector('.social__comment-shown-count');
+const commentsTotalCount = modalNode.querySelector('.social__comment-total-count');
+const commentsList = modalNode.querySelector('.social__comments');
+const caption = modalNode.querySelector('.social__caption');
+const commentCount = modalNode.querySelector('.social__comment-count');
+const commentsLoader = modalNode.querySelector('.comments-loader');
+const closeButton = modalNode.querySelector('.big-picture__cancel');
 
-export const openModal = (picture) => {
-    console.log(picture);
 
-    modalNode.classList.remove('hidden');
+const closeBigPicture = () => {
+  modalNode.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  closeButton.removeEventListener('click', onCloseButtonClick);
+};
+
+const onDocumentKeydown = (evt) => {
+  if (evt.key === 'Escape') {
+     evt.preventDefault();
+    closeBigPicture();
+  }
 }
 
+const onCloseButtonClick = () => {
+  closeBigPicture();
+};
+
+const renderComments = (comments) => {
+  commentsList.textContent = '';
+  comments.forEach((comment) => {
+    const commentElement = document.createElement('li');
+    commentElement.classList.add('social__comment');
+
+    const img = document.createElement('img');
+    img.classList.add('social__picture');
+    img.src = comment.avatar;
+    img.alt = comment.name;
+    img.width = 35;
+    img.height = 35;
+
+    const text = document.createElement('p');
+    text.classList.add('social__text');
+    text.textContent = comment.message;
+
+    commentElement.append(img);
+    commentElement.append(text);
+    commentsList.append(commentElement);
+  });
+};
+
+
+export const openModal = (photo) => {
+  modalNode.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+
+  bigPictureImg.src = photo.url;
+  likesCount.textContent = photo.likes;
+  commentsShownCount.textContent = photo.comments.length;
+  commentsTotalCount.textContent = photo.comments.length;
+  caption.textContent = photo.description;
+
+  renderComments(photo.comments);
+  commentCount.classList.add('hidden');
+  commentsLoader.classList.add('hidden');
+
+  closeButton.addEventListener('click', onCloseButtonClick);
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+