added render-pictures module

js/main.js

@@ -1,4 +1,4 @@
-import { getPhotos } from './get-photos.js';
+import { renderPictures } from './render-pictures.js';
 
-getPhotos();
+renderPictures();
 

js/render-pictures.js

@@ -0,0 +1,24 @@
+import { getPhotos } from './get-photos.js';
+
+function renderPictures() {
+  const photos = getPhotos();
+  const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
+  const picturesList = document.querySelector('.pictures');
+
+  const picturesListFragment = document.createDocumentFragment();
+
+  photos.forEach((photo) => {
+    const photoElement = pictureTemplate.cloneNode(true);
+    const photoImg = photoElement.querySelector('img');
+    photoImg.src = photo.url;
+    photoImg.alt = photo.description;
+    photoElement.querySelector('.picture__comments').textContent = photo.comments.length;
+    photoElement.querySelector('.picture__likes').textContent = photo.likes;
+
+    picturesListFragment.append(photoElement);
+  });
+
+  picturesList.append(picturesListFragment);
+}
+
+export { renderPictures };