diff --git a/js/constant.js b/js/constant.js index 246a283..7f9e69d 100644 --- 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 index dd9a42b..1e9f47d 100644 --- 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 index 3d7f23c..a3738a0 100644 --- 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 new file mode 100644 index 0000000..7681b01 --- /dev/null +++ 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 index 965e080..09b8e9a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -6,14 +6,16 @@ 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); } @@ -21,7 +23,7 @@ function getUniqueInteger (min,max) { return currentValue; }; -} +}; const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];