From 63eef705a9b2459de732d52850fe9ebe4bfe3f01 Mon Sep 17 00:00:00 2001 From: vikkont79 Date: Wed, 18 Dec 2024 17:30:13 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=9E=D1=82=D1=80=D0=B8=D1=81=D1=83=D0=B9?= =?UTF-8?q?=20=D0=BC=D0=B5=D0=BD=D1=8F=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/data.js | 12 ++++--- js/function.js | 90 -------------------------------------------------- js/main.js | 3 +- js/utils.js | 35 ++++++++++++++++++++ js/view.js | 24 ++++++++++++++ 5 files changed, 68 insertions(+), 96 deletions(-) delete mode 100644 js/function.js create mode 100644 js/utils.js diff --git a/js/data.js b/js/data.js index 962246e..a3b5eeb 100644 --- a/js/data.js +++ b/js/data.js @@ -2,7 +2,7 @@ import { getRandomInteger, getRandomUniqueInteger, getRandomArrayElement, -} from './functions.js'; +} from './utils.js'; // Массив описаний @@ -58,6 +58,8 @@ const NAMES = [ 'Виктор', ]; +const POST_COUNT = 25; + // Задаём максимальное кол-во комментов const MAX_COMMENTS = 500; @@ -100,10 +102,10 @@ const createComment = () => { // Создаём галлерею - массив объектов - фото -const createGallery = (quantity) => { - const uniquePhotoId = getRandomUniqueInteger(1, quantity); - const uniquePhotoUrl = getRandomUniqueInteger(1, quantity); - return Array.from({ length: quantity }).map(() => ({ +const createGallery = () => { + const uniquePhotoId = getRandomUniqueInteger(1, POST_COUNT); + const uniquePhotoUrl = getRandomUniqueInteger(1, POST_COUNT); + return Array.from({ length: POST_COUNT }).map(() => ({ id: uniquePhotoId(), url: `photos/${uniquePhotoUrl()}.jpeg`, description: getRandomArrayElement(DESCRIPTIONS), diff --git a/js/function.js b/js/function.js deleted file mode 100644 index 435746e..0000000 --- a/js/function.js +++ /dev/null @@ -1,90 +0,0 @@ -// Проверка на максимальную длину строки - -const checkStringLength = (string, maxLength) => string.length <= maxLength; - -checkStringLength('abracadabra', 15); - -// Проверка на палиндром с использованием цикла - -const checkPalindrom = (string) => { - const normilizedString = string.toLowerCase().replaceAll(' ', ''); - let reverseString = ''; - for (let i = normilizedString.length - 1; i >= 0; i--) { - reverseString += normilizedString[i]; - } - return normilizedString === reverseString; -}; - -checkPalindrom('Аргентина манит негра'); - -// Проверка на палиндром с использований методов объектов - -const isPalindrom = (string) => { - const normilizedString = string.toLowerCase().replaceAll(' ', ''); - const reverseString = normilizedString.split('').reverse().join(''); - return normilizedString === reverseString; -}; - -isPalindrom('Кекс'); - -// Извлечение чисел из строки с использованием цикла - -const isNumber = (string) => { - const normilizedString = string.toString().replaceAll(' ', ''); - let resultString = ''; - for (let i = 0; i < normilizedString.length; i++) { - if (!isNaN(normilizedString[i])) { - resultString += normilizedString[i]; - } - } - return parseInt(resultString, 10); -}; - -isNumber('1 литр рома на 1,5 литра колы'); - -// Извлечение чисел из строки через преобразование строки в объект - -const extractNumber = (string) => { - const normilizedString = string.toString().split(''); - let resultString = ''; - for (let i = 0; i < normilizedString.length; i++) { - if (!isNaN(normilizedString[i]) && normilizedString[i] !== ' ') { - resultString += normilizedString[i]; - } - } - return parseInt(resultString, 10); -}; - -extractNumber('2,5 грамма протеина на 1 кг массы тела'); - -// Определяем рандомное значение - -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, -}; diff --git a/js/main.js b/js/main.js index d7b9207..7106dc9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,3 +1,4 @@ import { createGallery } from './data.js'; +import { renderGallery } from './view.js'; -createGallery(); +renderGallery(createGallery()); diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..75cd781 --- /dev/null +++ b/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, +}; diff --git a/js/view.js b/js/view.js index e69de29..a3865e1 100644 --- a/js/view.js +++ b/js/view.js @@ -0,0 +1,24 @@ +const renderGallery = (gallery) => { + const picturesContainer = document.querySelector('.pictures'); + const pictureTemplate = document + .querySelector('#picture') + .content.querySelector('.picture'); + const pictureFragment = document.createDocumentFragment(); + + gallery.forEach(({ id, url, description, likes, comments }) => { + const pictureElement = pictureTemplate.cloneNode(true); + const imgElement = pictureElement.querySelector('.picture__img'); + const likesElement = pictureElement.querySelector('.picture__likes'); + const commentsElement = pictureElement.querySelector('.picture__comments'); + imgElement.dataset.id = id; + imgElement.src = url; + imgElement.alt = description; + likesElement.textContent = likes; + commentsElement.textContent = comments.length; + pictureFragment.appendChild(pictureElement); + }); + + picturesContainer.appendChild(pictureFragment); +}; + +export { renderGallery }; From f2239afb5f3adb89aade4ca6b25b72e780d7c784 Mon Sep 17 00:00:00 2001 From: vikkont79 Date: Thu, 19 Dec 2024 14:02:33 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BA=D0=BE=D0=B4=20=D0=98=D1=81=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D0=BB=20=D0=BF=D1=83=D1=82=D1=8C=20=D0=BA=20=D0=B8?= =?UTF-8?q?=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?= =?UTF-8?q?=D0=BC,=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BD=D0=B5=D0=B9=D0=BC=D0=B8=D0=BD=D0=B3=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=8B=D1=85,=20=D0=B8=D0=B7?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20=D0=B0=D1=82=D1=80=D0=B8=D0=B1?= =?UTF-8?q?=D1=83=D1=82=D1=8B=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/data.js | 2 +- js/view.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/js/data.js b/js/data.js index a3b5eeb..e7b7ed7 100644 --- a/js/data.js +++ b/js/data.js @@ -107,7 +107,7 @@ const createGallery = () => { const uniquePhotoUrl = getRandomUniqueInteger(1, POST_COUNT); return Array.from({ length: POST_COUNT }).map(() => ({ id: uniquePhotoId(), - url: `photos/${uniquePhotoUrl()}.jpeg`, + url: `photos/${uniquePhotoUrl()}.jpg`, description: getRandomArrayElement(DESCRIPTIONS), likes: getRandomInteger(LikesRange.MIN, LikesRange.MAX), comments: Array.from( diff --git a/js/view.js b/js/view.js index a3865e1..1aceca8 100644 --- a/js/view.js +++ b/js/view.js @@ -1,15 +1,16 @@ const renderGallery = (gallery) => { - const picturesContainer = document.querySelector('.pictures'); - const pictureTemplate = document + 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 = pictureTemplate.cloneNode(true); + 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; imgElement.dataset.id = id; imgElement.src = url; imgElement.alt = description; @@ -18,7 +19,7 @@ const renderGallery = (gallery) => { pictureFragment.appendChild(pictureElement); }); - picturesContainer.appendChild(pictureFragment); + picturesContainerElement.appendChild(pictureFragment); }; export { renderGallery }; From 7d7f085db418dea6b8750bdb4a0681a15098f83b Mon Sep 17 00:00:00 2001 From: vikkont79 Date: Thu, 19 Dec 2024 16:30:48 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BA=D0=BE=D0=B4=20=D0=BF=D0=BE=20=D1=80=D0=B5=D0=BA?= =?UTF-8?q?=D0=BE=D0=BC=D0=B5=D0=BD=D0=B4=D0=B0=D1=86=D0=B8=D1=8F=D0=BC=20?= =?UTF-8?q?=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D0=B2=D0=BD=D0=B8=D0=BA=D0=B0=20?= =?UTF-8?q?=D0=92=D0=B5=D1=80=D0=BD=D1=83=D0=BB=20=D0=BF=D0=B0=D1=80=D0=B0?= =?UTF-8?q?=D0=BC=D0=B5=D1=82=D1=80=20=D0=B2=20=D1=84=D1=83=D0=BD=D0=BA?= =?UTF-8?q?=D1=86=D0=B8=D1=8E=20createGallery,=20=D0=B7=D0=B0=D0=B2=D1=91?= =?UTF-8?q?=D0=BB=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=83?= =?UTF-8?q?=D1=8E=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=B0=D1=81=D1=81=D0=B8?= =?UTF-8?q?=D0=B2=D0=B0=20=D0=BF=D1=80=D0=B5=D0=B4=D0=B2=D0=B0=D1=80=D0=B8?= =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B0,=20=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B5=D1=81=D0=B8=D0=BB=20id=20=D0=BD=D0=B0?= =?UTF-8?q?=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/data.js | 10 ++++------ js/main.js | 4 +++- js/view.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/js/data.js b/js/data.js index e7b7ed7..38f202b 100644 --- a/js/data.js +++ b/js/data.js @@ -58,8 +58,6 @@ const NAMES = [ 'Виктор', ]; -const POST_COUNT = 25; - // Задаём максимальное кол-во комментов const MAX_COMMENTS = 500; @@ -102,10 +100,10 @@ const createComment = () => { // Создаём галлерею - массив объектов - фото -const createGallery = () => { - const uniquePhotoId = getRandomUniqueInteger(1, POST_COUNT); - const uniquePhotoUrl = getRandomUniqueInteger(1, POST_COUNT); - return Array.from({ length: POST_COUNT }).map(() => ({ +const createGallery = (quantity) => { + const uniquePhotoId = getRandomUniqueInteger(1, quantity); + const uniquePhotoUrl = getRandomUniqueInteger(1, quantity); + return Array.from({ length: quantity }).map(() => ({ id: uniquePhotoId(), url: `photos/${uniquePhotoUrl()}.jpg`, description: getRandomArrayElement(DESCRIPTIONS), diff --git a/js/main.js b/js/main.js index 7106dc9..adbddaa 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,6 @@ import { createGallery } from './data.js'; import { renderGallery } from './view.js'; -renderGallery(createGallery()); +const photosPreview = createGallery(25); + +renderGallery(photosPreview); diff --git a/js/view.js b/js/view.js index 1aceca8..097365b 100644 --- a/js/view.js +++ b/js/view.js @@ -11,7 +11,7 @@ const renderGallery = (gallery) => { const likesElement = pictureElement.querySelector('.picture__likes'); const commentsElement = pictureElement.querySelector('.picture__comments'); pictureElement.href = url; - imgElement.dataset.id = id; + pictureElement.dataset.id = id; imgElement.src = url; imgElement.alt = description; likesElement.textContent = likes;