Merge pull request #5 from vikkont79/module7-task1

js/data.js

@@ -2,7 +2,7 @@ import {
   getRandomInteger,
   getRandomUniqueInteger,
   getRandomArrayElement,
-} from './functions.js';
+} from './utils.js';
 
 // Массив описаний
 
@@ -105,7 +105,7 @@ const createGallery = (quantity) => {
   const uniquePhotoUrl = getRandomUniqueInteger(1, quantity);
   return Array.from({ length: quantity }).map(() => ({
     id: uniquePhotoId(),
-    url: `photos/${uniquePhotoUrl()}.jpeg`,
+    url: `photos/${uniquePhotoUrl()}.jpg`,
     description: getRandomArrayElement(DESCRIPTIONS),
     likes: getRandomInteger(LikesRange.MIN, LikesRange.MAX),
     comments: Array.from(

js/main.js

@@ -1,3 +1,6 @@
 import { createGallery } from './data.js';
+import { renderGallery } from './view.js';
 
-createGallery();
+const photosPreview = createGallery(25);
+
+renderGallery(photosPreview);

js/utils.js

@@ -0,0 +1,35 @@
+// Проверка на максимальную длину строки
+
+const checkStringLength = (string, maxLength) => string.length <= maxLength;
+
+// Определяем рандомное значение
+
+const getRandomInteger = (min, max) =>
+  Math.floor(Math.random() * (max - min + 1) + min);
+
+// Проверяем его на уникальность (возвращаем рандомное значение, ранее не использованое в блоке)
+
+const getRandomUniqueInteger = (min, max) => {
+  const uniqueIntArr = [];
+  return () => {
+    while (uniqueIntArr.length < max - min + 1) {
+      const randomInt = getRandomInteger(min, max);
+      if (!uniqueIntArr.includes(randomInt)) {
+        uniqueIntArr.push(randomInt);
+        return randomInt;
+      }
+    }
+  };
+};
+
+// Получаем рандомный элемент любого массива
+
+const getRandomArrayElement = (elements) =>
+  elements[getRandomInteger(0, elements.length - 1)];
+
+export {
+  getRandomInteger,
+  checkStringLength,
+  getRandomUniqueInteger,
+  getRandomArrayElement,
+};

js/view.js

@@ -0,0 +1,25 @@
+const renderGallery = (gallery) => {
+  const picturesContainerElement = document.querySelector('.pictures');
+  const pictureTemplateElement = document
+    .querySelector('#picture')
+    .content.querySelector('.picture');
+  const pictureFragment = document.createDocumentFragment();
+
+  gallery.forEach(({ id, url, description, likes, comments }) => {
+    const pictureElement = pictureTemplateElement.cloneNode(true);
+    const imgElement = pictureElement.querySelector('.picture__img');
+    const likesElement = pictureElement.querySelector('.picture__likes');
+    const commentsElement = pictureElement.querySelector('.picture__comments');
+    pictureElement.href = url;
+    pictureElement.dataset.id = id;
+    imgElement.src = url;
+    imgElement.alt = description;
+    likesElement.textContent = likes;
+    commentsElement.textContent = comments.length;
+    pictureFragment.appendChild(pictureElement);
+  });
+
+  picturesContainerElement.appendChild(pictureFragment);
+};
+
+export { renderGallery };