Merge pull request #6 from SergeyMedved/module7-task1

index.html

@@ -233,7 +233,6 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
-    <script src="js/functions.js"></script>
 <script src="js/main.js" type="module"></script>
 </body>
 </html>

js/main.js

@@ -1,5 +1,4 @@
 import { createPhotos } from './data.js';
+import { appendPhotos } from './preview.js';
 
-const result = createPhotos(25);
-
-console.log(result);
+appendPhotos(createPhotos(25));

js/preview.js

@@ -0,0 +1,24 @@
+const appendPhotos = (data) => {
+
+  const picturesElement = document.querySelector('.pictures');
+  const pictureTemplate = document.querySelector('#picture').content;
+  const photosFragment = new DocumentFragment();
+
+  data.forEach(({id, url, description, likes, comments}) => {
+    const clonedPicture = pictureTemplate.cloneNode(true);
+    const imgElement = clonedPicture.querySelector('.picture__img');
+    const likesElement = clonedPicture.querySelector('.picture__likes');
+    const commentsElement = clonedPicture.querySelector('.picture__comments');
+    imgElement.dataset.id = id;
+    imgElement.src = url;
+    imgElement.alt = description;
+    likesElement.textContent = likes;
+    commentsElement.textContent = comments.length;
+    photosFragment.appendChild(clonedPicture);
+  });
+
+  picturesElement.appendChild(photosFragment);
+
+};
+
+export { appendPhotos };