diff --git a/js/data.js b/js/data.js index 9a4e186..a0171cd 100644 --- a/js/data.js +++ b/js/data.js @@ -9,7 +9,6 @@ const COMMENTS = [ 'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!', ]; - const DESCRIPTIONS = [ 'Отличный день!', 'Прекрасный вид', @@ -21,5 +20,4 @@ const DESCRIPTIONS = [ 'Городские джунгли', ]; - export { NAMES, COMMENTS, DESCRIPTIONS }; diff --git a/js/main.js b/js/main.js index 9cf710f..05d7089 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,8 @@ /* eslint-disable no-console */ import { getArrayMiniatures } from './createArrayMiniatures.js'; -console.log(getArrayMiniatures()); +import { renderPictures } from './pictures.js'; + +const pictures = getArrayMiniatures(); +renderPictures(pictures); + diff --git a/js/pictures.js b/js/pictures.js new file mode 100644 index 0000000..b044e73 --- /dev/null +++ b/js/pictures.js @@ -0,0 +1,43 @@ +const picturesContainer = document.querySelector('.pictures'); +const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture'); + +/** + * Создает DOM-элемент миниатюры на основе шаблона #picture + * @param {Object} data - Объект с данными фотографии + * @param {string} data.url - Адрес изображения + * @param {string} data.description - Описание изображения + * @param {number} data.likes - Количество лайков + * @param {Array} data.comments - Массив комментариев + * @returns {HTMLElement} - DOM-элемент миниатюры + */ + +const createPictureElement = ({ url, description, likes, comments }) => { + const pictureElement = pictureTemplate.cloneNode(true); + + const pictureImg = pictureElement.querySelector('.picture__img'); + pictureImg.src = url; + pictureImg.alt = description; + + pictureElement.querySelector('.picture__likes').textContent = likes; + pictureElement.querySelector('.picture__comments').textContent = comments.length; + + return pictureElement; +}; + +/** + * Отрисовывает миниатюры фотографий в блок .pictures + * @param {Array} pictures - Массив объектов с данными фотографий + */ +const renderPictures = (pictures) => { + const fragment = document.createDocumentFragment(); + + pictures.forEach((picture) => { + const pictureElement = createPictureElement(picture); + fragment.appendChild(pictureElement); + }); + + picturesContainer.innerHTML = ''; + picturesContainer.appendChild(fragment); +}; + +export { renderPictures };