Merge pull request #6 from skyfxllen/module7-task1

js/data.js

@@ -1,18 +1,18 @@
 import {getARandomNumber} from './utils.js';
 import {names, comments, descriptions} from './constants.js';
-export function createArrayOfPhotos(){
-  const photos = [];
+export function createArrayOfPictures(){
+  const pictures = [];
   for (let i = 0; i < 25; i++){
-    const newPhoto = {
+    const newPicture = {
       id : i + 1,
       url: `photos/${i + 1}.jpg`,
       description: descriptions[getARandomNumber(descriptions.length)],
       likes: getARandomNumber(200, 15),
       comments: createArrayOfComments(),
     };
-    photos.push(newPhoto);
+    pictures.push(newPicture);
   }
-  return photos;
+  return pictures;
 }
 
 export function createArrayOfComments(){

js/main.js

@@ -1,4 +1,3 @@
-import {createArrayOfPhotos} from './data.js';
-
-createArrayOfPhotos();
+import {generatePictures} from './pictures.js';
 
+generatePictures();

js/pictures.js

@@ -0,0 +1,24 @@
+import {createArrayOfPictures} from "./data.js";
+
+export function generatePictures(){
+  const picturesContainer = document.querySelector(".pictures");
+  const pictureTemplate = document.querySelector("#picture").content.querySelector(".picture");
+  const pictureFragment = document.createDocumentFragment();
+
+  const pictures = createArrayOfPictures();
+
+  pictures.forEach((photo) => {
+    const {url, description, comments, likes} = photo;
+    const picture = pictureTemplate.cloneNode(true);
+
+    picture.querySelector(".picture__img").src = url;
+    picture.querySelector(".picture__img").alt = description;
+    picture.querySelector(".picture__comments").textContent = comments.length;
+    picture.querySelector(".picture__likes").textContent = likes;
+
+    pictureFragment.append(picture);
+  });
+
+  picturesContainer.append(pictureFragment);
+}
+