Merge pull request #7 from harl-i/module7-task1

index.html

@@ -250,6 +250,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
 </template>
 
 <script src="js/main.js" type="module"></script>
-<script src="js/functions.js"></script>
+<script src="js/thumbnails.js" type="module"></script>
 </body>
 </html>

js/main.js

@@ -1,6 +1,8 @@
 import {getRandomPhotoObjects} from './photos.js';
+import {showThumbnail} from './thumbnails.js';
 
 const OBJECTS_COUNT = 26;
 
-const generatedObjects = getRandomPhotoObjects(OBJECTS_COUNT);
-console.log(generatedObjects);
+const randomPhotoObjects = getRandomPhotoObjects(OBJECTS_COUNT);
+
+showThumbnail(randomPhotoObjects);

js/thumbnails.js

@@ -0,0 +1,21 @@
+const pictureTemplateElement = document.querySelector('#picture').content.querySelector('.picture');
+const picturesContainer = document.querySelector('.pictures');
+
+function showThumbnail(randomPhotoObjects) {
+  const fragment = document.createDocumentFragment();
+
+  randomPhotoObjects.forEach(({url, description, likes, comments }) => {
+    const pictureElement = pictureTemplateElement.cloneNode(true);
+
+    pictureElement.querySelector('img').src = url;
+    pictureElement.querySelector('img').alt = description;
+    pictureElement.querySelector('.picture__comments').textContent = comments.length;
+    pictureElement.querySelector('.picture__likes').textContent = likes;
+
+    fragment.appendChild(pictureElement);
+  });
+
+  picturesContainer.appendChild(fragment);
+}
+
+export {showThumbnail};