From 923ed6e436599e70509174bb356a3013b781f814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=B0=D0=BC=D0=B8=D0=BB=D0=B0?=
 <105364337+Camihak@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:48:23 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D1=80=D0=B8=D1=81=D1=83=D0=B9=20?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8F=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/create-thumbnails.js | 53 +++++++++++++++++++++++++++++++++++++++++
 js/data.js              | 53 +----------------------------------------
 js/draw-thumbnails.js   | 21 ++++++++++++++++
 js/main.js              |  5 ++--
 4 files changed, 77 insertions(+), 55 deletions(-)
 create mode 100644 js/create-thumbnails.js
 create mode 100644 js/draw-thumbnails.js

diff --git a/js/create-thumbnails.js b/js/create-thumbnails.js
new file mode 100644
index 0000000..91d5150
--- /dev/null
+++ b/js/create-thumbnails.js
@@ -0,0 +1,53 @@
+import {getRandomInteger, getRandomArrayElement, createRandomValuesRangeGenerator} from './util.js';
+import {NAMES, MESSAGES, DESCRIPTIONS} from './data.js';
+const idValues = {
+  MIN: 1,
+  MAX: 25,
+};
+
+const adressNumbers = {
+  MIN: 1,
+  MAX: 25,
+};
+
+const likesNumber = {
+  MIN: 15,
+  MAX: 200,
+};
+
+const commentsNumber = {
+  MIN: 0,
+  MAX: 30,
+};
+
+const avatarValues = {
+  MIN: 1,
+  MAX: 6,
+};
+
+const PHOTOS_NUMBER = 25;
+const createRandomId = createRandomValuesRangeGenerator(idValues.MIN, idValues.MAX);
+const createRandomAdress = createRandomValuesRangeGenerator(adressNumbers.MIN, adressNumbers.MAX);
+const createRandomCommentId = createRandomValuesRangeGenerator(idValues.MIN, idValues.MAX);
+
+const createComment = () => ({
+  id: createRandomCommentId(),
+  avatar: `img/avatar-${getRandomInteger(avatarValues.MIN, avatarValues.MAX)}.svg`,
+  message: getRandomArrayElement(MESSAGES),
+  name: getRandomArrayElement(NAMES)
+});
+
+
+const randomComments = Array.from({length: getRandomInteger(commentsNumber.MIN, commentsNumber.MAX)}, createComment);
+
+const createPost = () => ({
+  id: createRandomId(),
+  url: `photos/${createRandomAdress()}.jpg`,
+  description: getRandomArrayElement(DESCRIPTIONS),
+  likes: getRandomInteger(likesNumber.MIN, likesNumber.MAX),
+  comments: randomComments
+});
+
+const createPosts = () => Array.from({length: PHOTOS_NUMBER}, createPost);
+
+export {createPosts};
diff --git a/js/data.js b/js/data.js
index c269de8..ed3ca06 100644
--- a/js/data.js
+++ b/js/data.js
@@ -1,57 +1,6 @@
-import {getRandomInteger, getRandomArrayElement, createRandomValuesRangeGenerator} from './util.js';
-
 const NAMES = ['Федор', 'Камила', 'Полина', 'Сергей', 'Наталья', 'Филипп'];
 const MESSAGES = ['Всё отлично!', 'В целом всё неплохо. Но не всё.', 'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.', 'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.', 'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.', 'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'];
 const DESCRIPTIONS = ['Живописно!', 'Я фанат', 'Это мило', 'Мне нравится', 'Спасибо за фото', 'Просто магия', 'Фантастика', 'Ура! Ура! Ура!', 'Я в шоке', 'Реальные эмоции!'];
 
-const idValues = {
-  MIN: 1,
-  MAX: 25,
-};
-
-const adressNumbers = {
-  MIN: 1,
-  MAX: 25,
-};
-
-const likesNumber = {
-  MIN: 15,
-  MAX: 200,
-};
-
-const commentsNumber = {
-  MIN: 0,
-  MAX: 30,
-};
-
-const avatarValues = {
-  MIN: 1,
-  MAX: 6,
-};
-
-const PHOTOS_NUMBER = 25;
-const createRandomId = createRandomValuesRangeGenerator(idValues.MIN, idValues.MAX);
-const createRandomAdress = createRandomValuesRangeGenerator(adressNumbers.MIN, adressNumbers.MAX);
-const createRandomCommentId = createRandomValuesRangeGenerator(idValues.MIN, idValues.MAX);
-
-const createComment = () => ({
-  id: createRandomCommentId(),
-  avatar: `img/avatar-${getRandomInteger(avatarValues.MIN, avatarValues.MAX)}.svg`,
-  message: getRandomArrayElement(MESSAGES),
-  name: getRandomArrayElement(NAMES)
-});
-
-
-const randomComments = Array.from({length: getRandomInteger(commentsNumber.MIN, commentsNumber.MAX)}, createComment);
-
-const createPost = () => ({
-  id: createRandomId(),
-  url: `photos/{${createRandomAdress()}}.jpg`,
-  description: getRandomArrayElement(DESCRIPTIONS),
-  likes: getRandomInteger(likesNumber.MIN, likesNumber.MAX),
-  comments: randomComments
-});
-
-const createPosts = () => Array.from({length: PHOTOS_NUMBER}, createPost);
+export {NAMES, MESSAGES, DESCRIPTIONS};
 
-export {createPosts};
diff --git a/js/draw-thumbnails.js b/js/draw-thumbnails.js
new file mode 100644
index 0000000..444839f
--- /dev/null
+++ b/js/draw-thumbnails.js
@@ -0,0 +1,21 @@
+import {createPosts} from './create-thumbnails.js';
+const thumbnailsBlock = document.querySelector('.pictures');
+const thumbnailTemplate = document.querySelector('#picture').content.querySelector('.picture');
+const thumbnails = createPosts();
+const thumbnailsListFragment = document.createDocumentFragment();
+
+const displaysThumbnails = (thumbnailsList) => {
+  thumbnailsList.forEach(({url, description, likes, comments}) => {
+    const templateClone = thumbnailTemplate.cloneNode(true);
+    templateClone.querySelector('.picture__img').src = url;
+    templateClone.querySelector('.picture__img').alt = description;
+    templateClone.querySelector('.picture__likes').textContent = likes;
+    templateClone.querySelector('.picture__comments').textContent = comments.length;
+    thumbnailsListFragment.appendChild(templateClone);
+  });
+  thumbnailsBlock.appendChild(thumbnailsListFragment);
+};
+
+export {displaysThumbnails, thumbnails};
+
+
diff --git a/js/main.js b/js/main.js
index 23c1f9d..186500c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,3 @@
-import {createPosts} from './data.js';
-
-createPosts();
+import {displaysThumbnails, thumbnails} from './draw-thumbnails.js';
 
+displaysThumbnails(thumbnails);