From d28c28e81405ea8be35b3beaf5e315592c107384 Mon Sep 17 00:00:00 2001
From: Kate <inthemist04@gmail.com>
Date: Sun, 8 Dec 2024 18:20:33 +0700
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=B3=D0=B5=D0=BD=D0=B5=D1=80=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8E=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/open-full-picture.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/js/open-full-picture.js b/js/open-full-picture.js
index 65a54a9..3d72352 100644
--- a/js/open-full-picture.js
+++ b/js/open-full-picture.js
@@ -3,7 +3,8 @@ import {picturesContainer} from './render-thumbnails.js';
 import {createComment} from './data.js';
 
 const closeButton = document.querySelector('.big-picture__cancel');
-const commentsList = document.querySelector('.social__comments');
+const commentsList = document.querySelector('.social__comments'); //socialCommentsNode
+const commentTemplate = commentsList.querySelector('.social__comment');
 
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
@@ -20,6 +21,7 @@ const onClickButtonClose = (evt) => {
 
 const openFullPicture = (pictureId, data) => {
   const currentPhoto = data.find((photo) => photo.id === Number(pictureId));
+  const commentsFragment = document.createDocumentFragment();
 
   document.querySelector('body').classList.add('modal-open');
   document.querySelector('.big-picture').classList.remove('hidden');
@@ -27,6 +29,21 @@ const openFullPicture = (pictureId, data) => {
   document.querySelector('.likes-count').textContent = currentPhoto.likes;
   document.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
   document.querySelector('.social__caption').textContent = currentPhoto.description;
+
+  commentsList.innerHTML = '';
+
+  currentPhoto.comments.forEach((comment) => {
+    const pictureComment = commentTemplate.cloneNode(true);
+
+    pictureComment.querySelector('.social__picture').src = comment.avatar;
+    pictureComment.querySelector('.social__picture').alt = comment.name;
+    pictureComment.querySelector('.social__text').textContent = comment.message;
+
+    commentsFragment.appendChild(pictureComment);
+  });
+
+  commentsList.appendChild(commentsFragment);
+
   document.addEventListener('keydown', onDocumentKeydown);
   closeButton.addEventListener('click', onClickButtonClose);
 };