Merge pull request #7 from Julyova/module7-task1

Author: keksobot

js/data.js

@@ -9,7 +9,6 @@ const COMMENTS = [
   'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!',
 ];
 
-
 const DESCRIPTIONS = [
   'Отличный день!',
   'Прекрасный вид',
@@ -21,5 +20,4 @@ const DESCRIPTIONS = [
   'Городские джунгли',
 ];
 
-
 export { NAMES, COMMENTS, DESCRIPTIONS };

js/main.js

@@ -1,4 +1,8 @@
 /* eslint-disable no-console */
 
 import { getArrayMiniatures } from './createArrayMiniatures.js';
-console.log(getArrayMiniatures());
+import { renderPictures } from './pictures.js';
+
+const pictures = getArrayMiniatures();
+renderPictures(pictures);
+

js/pictures.js

@@ -0,0 +1,43 @@
+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 pictureElement = pictureTemplate.cloneNode(true);
+
+  const pictureImg = pictureElement.querySelector('.picture__img');
+  pictureImg.src = url;
+  pictureImg.alt = description;
+
+  pictureElement.querySelector('.picture__likes').textContent = likes;
+  pictureElement.querySelector('.picture__comments').textContent = comments.length;
+
+  return pictureElement;
+};
+
+/**
+ * Отрисовывает миниатюры фотографий в блок .pictures
+ * @param {Array} pictures - Массив объектов с данными фотографий
+ */
+const renderPictures = (pictures) => {
+  const fragment = document.createDocumentFragment();
+
+  pictures.forEach((picture) => {
+    const pictureElement = createPictureElement(picture);
+    fragment.appendChild(pictureElement);
+  });
+
+  picturesContainer.innerHTML = '';
+  picturesContainer.appendChild(fragment);
+};
+
+export { renderPictures };