Отрисуй меня полностью

js/main.js

@@ -1,5 +1,9 @@
 import { getPictures } from './data/pictures.js';
+import { renderPictures } from './render/gallery.js';
 
-console.log(
-  getPictures()
-);
+const container = document.querySelector('.pictures');
+const template = document.querySelector('#picture')?.content?.querySelector('.picture');
+
+if (container && template) {
+  renderPictures(getPictures(), container, template);
+}

js/render/gallery.js

@@ -0,0 +1,28 @@
+const createPictureElement = ({ url, description, likes, comments }, template) => {
+  const element = template.cloneNode(true);
+
+  const elementImage = element.querySelector('.picture__img');
+  elementImage.src = url;
+  elementImage.alt = description;
+
+  element.querySelector('.picture__likes').textContent = String(likes);
+  element.querySelector('.picture__comments').textContent = String(comments?.length ?? 0);
+
+  return element;
+};
+
+const renderPictures = (pictures, container, template) => {
+  if (!Array.isArray(pictures)) {
+    throw new TypeError('Pictures must be an array');
+  }
+
+  const fragment = document.createDocumentFragment();
+
+  pictures.forEach((picture) => {
+    fragment.append(createPictureElement(picture, template));
+  });
+
+  container.append(fragment);
+};
+
+export { renderPictures };

js/utils/random.js

@@ -4,11 +4,11 @@ const getRandomInteger = (min, max) => {
   }
 
   if (typeof min !== 'number' || typeof max !== 'number') {
-    throw new TypeError('min and max must be numbers');
+    throw new TypeError('Min and max must be numbers');
   }
 
   if (!Number.isFinite(min) || !Number.isFinite(max)) {
-    throw new TypeError('min and max must be finite numbers');
+    throw new TypeError('Min and max must be finite numbers');
   }
 
   const lower = Math.ceil(Math.min(min, max));
@@ -23,7 +23,7 @@ const getRandomInteger = (min, max) => {
 
 const getRandomItem = (items) => {
   if (!Array.isArray(items) || items.length === 0) {
-    throw new TypeError('items must be a non-empty array');
+    throw new TypeError('Items must be a non-empty array');
   }
 
   return items[getRandomInteger(0, items.length - 1)];