Merge pull request #10 from aLesya66/module7-task1

js/createMiniature.js

@@ -0,0 +1,34 @@
+import { finalMas } from './mas.js';
+
+const template = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
+
+const similarFinalMas = finalMas();
+
+const fragment = document.createDocumentFragment();
+
+similarFinalMas.forEach(({url, description, comments, likes}) => {
+  const copy = template.cloneNode(true);
+
+  copy.querySelector('.picture__img').src = url;
+  copy.querySelector('.picture__img').alt = description;
+  copy.querySelector('.picture__comments').textContent = comments.length;//
+  copy.querySelector('.picture__likes').textContent = likes;//
+
+  container.append(copy);
+});
+
+container.appendChild(fragment);
+export{similarFinalMas};
+
+/* <template id="picture">
+    <a href="#" class="picture">
+      <img class="picture__img" src="" width="182" height="182" alt="Случайная фотография">
+      <p class="picture__info">
+        <span class="picture__comments"></span>
+        <span class="picture__likes"></span>
+      </p>
+    </a>
+  </template> */
+/* <section class="pictures  container">
+<h2 class="pictures__title  visually-hidden">Фотографии других пользователей</h2> */

js/data.js

@@ -1,8 +1,7 @@
-import {getRandomArrayElement, getRandomInteger} from './rand.js';
-
 const description = ['пляж', 'лес', 'море', 'юг', 'оеан', 'лето', 'весна', 'котики', 'будни',
   'работа', 'лайфхаки', 'блог', 'прайс-лист', 'ночь', 'эстетика',
-  'книги', 'еда', 'зоопарк', 'театр', 'прогулка', 'путешествие', 'парк', 'закат', 'музыка', 'хобби' ];
+  'книги', 'еда', 'зоопарк', 'театр', 'прогулка', 'путешествие', 'парк', 'закат', 'музыка', 'хобби',
+];
 const messageCommentator = [
   'Всё отлично!',
   'В целом всё неплохо. Но не всё.',
@@ -18,20 +17,4 @@ const nameCommentator = [
 
 const count = 25;
 
-const createComment = (indexx) => ({
-  id: indexx + 1,
-  avatar: `img/avatar-${ getRandomInteger(1, 6) } .svg`,
-  message: `${getRandomArrayElement(messageCommentator)}`,
-  name: `${getRandomArrayElement(nameCommentator)}`,
-});
-
-const createUsers = (index) => ({
-  id: index + 1,
-  url: `photos/${ index + 1 }.jpg` ,
-  description: `${getRandomArrayElement(description)}`,
-  likes: getRandomInteger(1, 200),
-  comments: Array.from({ length: getRandomInteger(1, 30) }, (__, indexx) => createComment(indexx)),
-});
-const finalMas = Array.from({length:count}, (__, index) => createUsers(index));
-
-export {finalMas};
+export {description, messageCommentator, nameCommentator, count};

js/main.js

@@ -1,3 +1,2 @@
-import { finalMas } from './data';
-// eslint-disable-next-line no-console
-console.log(finalMas);
+import {similarFinalMas} from './createMiniature.js';
+similarFinalMas();

js/mas.js

@@ -0,0 +1,20 @@
+import {getRandomArrayElement, getRandomInteger} from './rand.js';
+import {description, messageCommentator, nameCommentator, count} from './data.js';
+
+const createComment = (indexx) => ({
+  id: indexx + 1,
+  avatar: `img/avatar-${ getRandomInteger(1, 6) } .svg`,
+  message: `${getRandomArrayElement(messageCommentator)}`,
+  name: `${getRandomArrayElement(nameCommentator)}`,
+});
+
+const createUsers = (index) => ({
+  id: index + 1,
+  url: `photos/${ index + 1 }.jpg` ,
+  description: `${getRandomArrayElement(description)}`,
+  likes: getRandomInteger(1, 200),
+  comments: Array.from({ length: getRandomInteger(1, 30) }, (__, indexx) => createComment(indexx)),
+});
+const finalMas = () => Array.from({length:count}, (__, index) => createUsers(index));
+
+export {finalMas};

js/rand.js

@@ -4,7 +4,6 @@ const getRandomInteger = (a, b) => {
   const result = Math.random() * (upper - lower + 1) + lower;
   return Math.floor(result);
 };
-
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
 export {getRandomArrayElement, getRandomInteger };