From 5b888b629a70c7ad7bd5cb565be46f8b8d2b51e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AE=D0=BB=D0=B8=D1=8F=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8B=D0=B3=D0=B8=D0=BD=D0=B0?= <julyvol@yahoo.com>
Date: Wed, 22 Apr 2026 20:51:27 +0300
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D1=83?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=81=D1=86=D0=B5=D0=BD=D0=B0=D1=80=D0=B8=D0=B9?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B0=20?=
 =?UTF-8?q?=D1=84=D0=BE=D1=82=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=B9=20?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE=D1=80=D0=B0=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=80=D0=BD=D0=BE=D0=BC=20=D1=80=D0=B5=D0=B6=D0=B8=D0=BC?=
 =?UTF-8?q?=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/big-picture.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++
 js/main.js        |  2 ++
 js/pictures.js    | 24 ++++++---------
 3 files changed, 85 insertions(+), 15 deletions(-)
 create mode 100644 js/big-picture.js

diff --git a/js/big-picture.js b/js/big-picture.js
new file mode 100644
index 0000000..49e6a2b
--- /dev/null
+++ b/js/big-picture.js
@@ -0,0 +1,74 @@
+const bigPictureElement = document.querySelector('.big-picture');
+const bigPictureImg = bigPictureElement.querySelector('.big-picture__img img');
+const likesCount = bigPictureElement.querySelector('.likes-count');
+const commentCount = bigPictureElement.querySelector('.social__comment-shown-count');
+const totalCommentCount = bigPictureElement.querySelector('.social__comment-total-count');
+const socialCaption = bigPictureElement.querySelector('.social__caption');
+const socialComments = bigPictureElement.querySelector('.social__comments');
+const commentCountBlock = bigPictureElement.querySelector('.social__comment-count');
+const commentsLoader = bigPictureElement.querySelector('.comments-loader');
+const cancelButton = bigPictureElement.querySelector('.big-picture__cancel');
+
+const createCommentElement = ({ avatar, name, message }) => {
+  const commentItem = document.createElement('li');
+  commentItem.classList.add('social__comment');
+
+  const img = document.createElement('img');
+  img.classList.add('social__picture');
+  img.src = avatar;
+  img.alt = name;
+  img.width = 35;
+  img.height = 35;
+
+  const p = document.createElement('p');
+  p.classList.add('social__text');
+  p.textContent = message;
+
+  commentItem.appendChild(img);
+  commentItem.appendChild(p);
+
+  return commentItem;
+};
+
+const openBigPicture = (pictureData) => {
+  bigPictureElement.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+
+  bigPictureImg.src = pictureData.url;
+  bigPictureImg.alt = pictureData.description;
+  likesCount.textContent = pictureData.likes;
+  socialCaption.textContent = pictureData.description;
+
+  socialComments.innerHTML = '';
+
+  const comments = pictureData.comments;
+  totalCommentCount.textContent = comments.length;
+  commentCount.textContent = Math.min(5, comments.length);
+
+  comments.forEach((comment) => {
+    const commentElement = createCommentElement(comment);
+    socialComments.appendChild(commentElement);
+  });
+
+  commentCountBlock.classList.add('hidden');
+  commentsLoader.classList.add('hidden');
+};
+
+const closeBigPicture = () => {
+  bigPictureElement.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+};
+
+const initBigPictureHandlers = () => {
+  cancelButton.addEventListener('click', () => {
+    closeBigPicture();
+  });
+
+  document.addEventListener('keydown', (evt) => {
+    if (evt.key === 'Escape' && !bigPictureElement.classList.contains('hidden')) {
+      closeBigPicture();
+    }
+  });
+};
+
+export { openBigPicture, closeBigPicture, initBigPictureHandlers };
diff --git a/js/main.js b/js/main.js
index 05d7089..0a254e4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,7 +2,9 @@
 
 import { getArrayMiniatures } from './createArrayMiniatures.js';
 import { renderPictures } from './pictures.js';
+import { initBigPictureHandlers } from './big-picture.js';
 
 const pictures = getArrayMiniatures();
 renderPictures(pictures);
+initBigPictureHandlers();
 
diff --git a/js/pictures.js b/js/pictures.js
index b044e73..b590071 100644
--- a/js/pictures.js
+++ b/js/pictures.js
@@ -1,17 +1,10 @@
+import { openBigPicture } from './big-picture.js';
+
 const picturesContainer = document.querySelector('.pictures');
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
-/**
- * Создает DOM-элемент миниатюры на основе шаблона #picture
- * @param {Object} data - Объект с данными фотографии
- * @param {string} data.url - Адрес изображения
- * @param {string} data.description - Описание изображения
- * @param {number} data.likes - Количество лайков
- * @param {Array} data.comments - Массив комментариев
- * @returns {HTMLElement} - DOM-элемент миниатюры
- */
-
-const createPictureElement = ({ url, description, likes, comments }) => {
+const createPictureElement = (picture) => {
+  const { url, description, likes, comments } = picture;
   const pictureElement = pictureTemplate.cloneNode(true);
 
   const pictureImg = pictureElement.querySelector('.picture__img');
@@ -21,13 +14,14 @@ const createPictureElement = ({ url, description, likes, comments }) => {
   pictureElement.querySelector('.picture__likes').textContent = likes;
   pictureElement.querySelector('.picture__comments').textContent = comments.length;
 
+  pictureElement.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    openBigPicture(picture);
+  });
+
   return pictureElement;
 };
 
-/**
- * Отрисовывает миниатюры фотографий в блок .pictures
- * @param {Array} pictures - Массив объектов с данными фотографий
- */
 const renderPictures = (pictures) => {
   const fragment = document.createDocumentFragment();