Merge pull request #6 from OlgaGulyakevich/module7-task1

js/data.js

@@ -46,8 +46,8 @@ const generatePhotoDescription = () => ({
 });
 
 // Генерация массива описаний фотографий
-const generateDataPhotoDescriptions = () => Array.from(
+const generatePhotoDescriptions = () => Array.from(
   {length: PHOTO_DESCRIPTION_COUNT},
   generatePhotoDescription);
 
-export {generateDataPhotoDescriptions};
+export { generatePhotoDescriptions };

js/functions.js

@@ -17,9 +17,7 @@ const isPolindrom = (text) => {
 // Функция для извлечения всех цифр из строки.
 
 const extractDigits = (inputChar) => {
-
   const nomalizedChars = inputChar.replaceAll(' ', '').split(''); /* Убирает пробелы и разбивает на символы */
-
   let digits = ''; /* Переменная для хранения цифр */
 
   for (const char of nomalizedChars) {
@@ -33,12 +31,10 @@ const extractDigits = (inputChar) => {
 // Функция для проверки, укладывается ли встреча в рамки рабочего дня.
 
 function isMeetingWithinWorkHours (workStart, workEnd, meetingStart, meetingDuration) {
-
   const timeToMinutes = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
     return hours * 60 + minutes;
   };
-
   const workStartMinutes = timeToMinutes(workStart);
   const workEndMinutes = timeToMinutes(workEnd);
   const meetingStartMinutes = timeToMinutes(meetingStart);

js/main.js

@@ -1,15 +1,18 @@
-import {generateDataPhotoDescriptions} from './data.js';
-import './upload.js';
-import './scale.js';
-import './effects.js';
-import './validation.js';
-import './fetch.js';
-import './thumbnails.js';
-import './filters.js';
-import './fullscreen.js';
-import './feed.js';
-import './form.js';
-import './form-visability.js';
+// import './upload.js';
+// import './scale.js';
+// import './effects.js';
+// import './validation.js';
+// import './fetch.js';
+// import './filters.js';
+// import './fullscreen.js';
+// import './feed.js';
+// import './form.js';
+// import './form-visability.js';
 
-const photoDescriptions = generateDataPhotoDescriptions();
-console.log(photoDescriptions);
+import {generatePhotoDescriptions} from './data.js';
+import {renderDataPhotos} from './thumbnails.js';
+
+const pictureContainer = document.querySelector('.pictures');
+const dataPhotos = generatePhotoDescriptions();
+
+renderDataPhotos(pictureContainer, dataPhotos);

js/thumbnails.js

@@ -0,0 +1,24 @@
+const similarPhotoTemplate = document
+  .querySelector('#picture')
+  .content.querySelector('.picture');
+
+const PhotoFragment = document.createDocumentFragment();
+
+const renderDataPhotos = (container, dataPhotos) => {
+  dataPhotos.forEach(({url, description, likes, comments}) => {
+    const photoElement = similarPhotoTemplate.cloneNode(true);
+
+    const photoElementImg = photoElement.querySelector('.picture__img');
+    photoElementImg.src = url;
+    photoElement.alt = description;
+
+    photoElement.querySelector('.picture__likes').textContent = likes;
+    photoElement.querySelector('.picture__comments').textContent = comments.length;
+
+    PhotoFragment.append(photoElement);
+  });
+
+  container.append(PhotoFragment);
+};
+
+export { renderDataPhotos };

js/util.js

@@ -12,7 +12,6 @@ const getRandomInteger = (min, max) => {
   return Math.floor(result);
 };
 
-
 // Получение случайного элемента массива
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];