Merge pull request #8 from margarita0206/module7-task1

htmlacademy-javascript · Jul 15, 2024 · c10b163 · c10b163
2 parents 526b798 + 6277ba6
commit c10b163
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/js/constant.js b/js/constant.js
@@ -1,13 +1,14 @@
-const POSTS_COUNT = 25;
+const MIN_POSTS_COUNT = 1;
+const MAX_POSTS_COUNT = 25;
 const AVATAR_MIN_COUNT = 1;
-const AVATAR_MAX_COUNT = 25;
+const AVATAR_MAX_COUNT = 6;
 const LIKES_MIN_COUNT = 15;
 const LIKES_MAX_COUNT = 200;
 const COMMENT_MIN_COUNT = 0;
 const COMMENT_MAX_COUNT = 30;
 const COMMENT_MAX_ID = 500000;
 
-const COMENT_NAMES = [
+const COMMENT_NAMES = [
   'Анна',
   'Александр',
   'Светлана',
@@ -51,4 +52,4 @@ const DESCRIPTIONS = [
   'Этой фотографии описание не нужно'
 ];
 
-export {POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS};
+export {MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS};
diff --git a/js/data.js b/js/data.js
@@ -1,24 +1,23 @@
 import {
-  POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS
+  MAX_POSTS_COUNT, MIN_POSTS_COUNT, AVATAR_MIN_COUNT, AVATAR_MAX_COUNT, LIKES_MIN_COUNT, LIKES_MAX_COUNT, COMMENT_MIN_COUNT, COMMENT_MAX_COUNT, COMMENT_MAX_ID, COMMENT_NAMES, POSTS_COMMENTS, DESCRIPTIONS
 } from './constant.js';
 
 import {
   getRandomInteger, getUniqueInteger, getRandomArrayElement
 } from './utils.js';
 
-const randomPostId = getUniqueInteger(1, POSTS_COUNT);
-const randomPostUrl = getUniqueInteger(1, POSTS_COUNT);
+const randomPostId = getUniqueInteger(MIN_POSTS_COUNT, MAX_POSTS_COUNT);
+const randomPostUrl = getUniqueInteger(MIN_POSTS_COUNT, MAX_POSTS_COUNT);
 const randomCommentID = getUniqueInteger(1, COMMENT_MAX_ID);
 
 const createPost = () => {
-
   const randomPostDescription = getRandomArrayElement(DESCRIPTIONS);
 
   const createComment = () => ({
     'id': randomCommentID,
     'avatar': `img/avatar-${getRandomInteger(AVATAR_MIN_COUNT,AVATAR_MAX_COUNT)}.svg`,
     'message': getRandomArrayElement(POSTS_COMMENTS),
-    'name': getRandomArrayElement(COMENT_NAMES),
+    'name': getRandomArrayElement(COMMENT_NAMES),
   });
 
   return {
@@ -30,6 +29,6 @@ const createPost = () => {
   };
 };
 
-const randomPosts = Array.from({ length: POSTS_COUNT }, createPost);
+const randomPosts = () => Array.from({ length: MAX_POSTS_COUNT }, createPost);
 
 export {randomPosts};
diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,4 @@
 import {randomPosts} from './data.js';
+import {generateThumbnails} from './thumbnail.js';
+generateThumbnails(randomPosts());
 
-console.log(randomPosts);
diff --git a/js/thumbnail.js b/js/thumbnail.js
@@ -0,0 +1,26 @@
+const thumbNailTemplate = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
+
+const createThumbnail = (picture) => {
+  const thumbnail = thumbNailTemplate.cloneNode(true);
+
+  thumbnail.querySelector('.picture__img').src = picture.url;
+  thumbnail.querySelector('.picture__img').alt = picture.description;
+  thumbnail.querySelector('.picture__likes').textContent = picture.likes;
+  thumbnail.querySelector('.picture__comments').textContent = picture.comments.length;
+
+  return thumbnail;
+};
+
+const generateThumbnails = (pictures) => {
+  const fragment = document.createDocumentFragment();
+
+  pictures.forEach((picture) => {
+    const thumbnail = createThumbnail(picture);
+    fragment.append(thumbnail);
+  });
+
+  container.append(fragment);
+};
+
+export {generateThumbnails};
diff --git a/js/utils.js b/js/utils.js
@@ -6,22 +6,24 @@ const getRandomInteger = (a, b) => {
   return Math.floor(result);
 };
 
-function getUniqueInteger (min,max) {
+const getUniqueInteger = (min,max) => {
   const previousValues = [];
 
   return function () {
+    let currentValue = getRandomInteger(min, max);
+
     if (previousValues.length >= (max - min + 1)) {
       return null;
     }
-    let currentValue = getRandomInteger(min, max);
+
     while (previousValues.includes(currentValue)) {
       currentValue = getRandomInteger(min, max);
     }
     previousValues.push(currentValue);
 
     return currentValue;
   };
-}
+};
 
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];