diff --git a/index.html b/index.html
index 946be65..3b2aa47 100644
--- a/index.html
+++ b/index.html
@@ -208,34 +208,35 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
     </li>
   </template>
 
-  <!-- Сообщение с ошибкой загрузки изображения -->
-  <template id="error">
-    <section class="error">
-      <div class="error__inner">
-        <h2 class="error__title">Ошибка загрузки файла</h2>
-        <button type="button" class="error__button">Попробовать ещё раз</button>
-      </div>
-    </section>
-  </template>
+ <!-- Сообщение с ошибкой загрузки изображения -->
+ <template id="error">
+  <section class="error">
+    <div class="error__inner">
+      <h2 class="error__title">Ошибка загрузки файла</h2>
+      <button type="button" class="error__button">Попробовать ещё раз</button>
+    </div>
+  </section>
+</template>
+
+<!-- Сообщение об успешной загрузке изображения -->
+<template id="success">
+  <section class="success">
+    <div class="success__inner">
+      <h2 class="success__title">Изображение успешно загружено</h2>
+      <button type="button" class="success__button">Круто!</button>
+    </div>
+  </section>
+</template>
 
-  <!-- Сообщение об успешной загрузке изображения -->
-  <template id="success">
-    <section class="success">
-      <div class="success__inner">
-        <h2 class="success__title">Изображение успешно загружено</h2>
-        <button type="button" class="success__button">Круто!</button>
-      </div>
+  <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
+  <template id="data-error">
+    <section class="data-error">
+      <h2 class="data-error__title">Не удалось загрузить данные</h2>
     </section>
   </template>
 
-    <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
-    <template id="data-error">
-      <section class="data-error">
-        <h2 class="data-error__title">Не удалось загрузить данные</h2>
-      </section>
-    </template>
-    <script src="./js/main.js" type="module"></script>
     <script src="./vendor/pristine/pristine.min.js"></script>
     <script src="./vendor/nouislider/nouislider.js"></script>
+    <script src="./js/main.js" type="module"></script>
 </body>
 </html>
diff --git a/js/alert-error.js b/js/alert-error.js
new file mode 100644
index 0000000..da117ad
--- /dev/null
+++ b/js/alert-error.js
@@ -0,0 +1,43 @@
+import { isEscapeKey } from './utils.js';
+
+const alertTemplateError = document.querySelector('#error').content;
+
+const removeAlert = () => {
+  const currentAlert = document.querySelector('.error');
+  if (currentAlert) {
+    document.body.removeChild(currentAlert);
+    document.removeEventListener('keydown', onDocumentKeydown);
+  }
+};
+
+function onDocumentKeydown (evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    removeAlert();
+  }
+}
+
+const showAlertError = (message) => {
+  const alert = alertTemplateError.cloneNode(true);
+
+  const alertTitle = alert.querySelector('.error__title');
+  alertTitle.textContent = message;
+
+  const alertButton = alert.querySelector('button');
+
+  alertButton.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    removeAlert();
+  });
+
+  const alertSection = alert.querySelector('section');
+
+  alertSection.addEventListener('click', () => {
+    removeAlert();
+  });
+
+  document.addEventListener('keydown', onDocumentKeydown);
+  document.body.append(alert);
+};
+
+export {showAlertError};
diff --git a/js/alert-success.js b/js/alert-success.js
new file mode 100644
index 0000000..1e9cac4
--- /dev/null
+++ b/js/alert-success.js
@@ -0,0 +1,40 @@
+import { isEscapeKey } from './utils.js';
+
+const alertTemplateSuccess = document.querySelector('#success').content;
+
+const removeAlert = () => {
+  const currentAlert = document.querySelector('.success');
+  if (currentAlert) {
+    document.body.removeChild(currentAlert);
+    document.removeEventListener('keydown', onDocumentKeydown);
+  }
+};
+
+function onDocumentKeydown (evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    removeAlert();
+  }
+}
+
+const showAlertSucces = () => {
+  const alert = alertTemplateSuccess.cloneNode(true);
+
+  const alertButton = alert.querySelector('.success__button');
+
+  alertButton.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    removeAlert();
+  });
+
+  const alertSection = alert.querySelector('.success');
+
+  alertSection.addEventListener('click', () => {
+    removeAlert();
+  });
+
+  document.addEventListener('keydown', onDocumentKeydown);
+  document.body.append(alert);
+};
+
+export { showAlertSucces };
diff --git a/js/api.js b/js/api.js
new file mode 100644
index 0000000..81b52ec
--- /dev/null
+++ b/js/api.js
@@ -0,0 +1,31 @@
+const BASE_URL = 'https://31.Javascript.htmlacademy.pro/kekstagram';
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные. Попробуйте обновить страницу',
+  SEND_DATA: 'Не удалось отправить форму',
+};
+
+const load = (route, errorText, method = Method.GET, body = null) =>
+  fetch(`${BASE_URL}${route}`, {method, body})
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    })
+    .catch(() => {
+      throw new Error(errorText);
+    });
+
+const getData = () => load(Route.GET_DATA, ErrorText.GET_DATA);
+
+const sendData = (body) => load(Route.SEND_DATA, ErrorText.SEND_DATA, Method.POST, body);
+
+export {getData, sendData};
diff --git a/js/create-pictures-description.js b/js/create-pictures-description.js
deleted file mode 100644
index ccabf80..0000000
--- a/js/create-pictures-description.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import {getRandomInteger, getRandomArrayElement, createIdGenerator} from './utils.js';
-
-const MIN_NUMBER_AVATAR = 1;
-const MAX_NUMBER_AVATAR = 6;
-const MIN_LIKES = 15;
-const MAX_LIKES = 250;
-const QUANTITY_ARRAYS = 25;
-const MIN_COMMENTS = 0;
-const MAX_COMMENTS = 30;
-
-const NAMES = [
-  'Иван',
-  'Хуан Себастьян',
-  'Мария',
-  'Кристоф',
-  'Виктор',
-  'Юлия',
-  'Люпита',
-  'Вашингтон'
-];
-
-const DESCRIPTION = [
-  'Фото гор',
-  'Фото животного',
-  'Фото леса',
-  'Фото дома'
-];
-
-const MESSAGE = [
-  'Всё отлично!',
-  'В целом всё неплохо. Но не всё.',
-  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
-  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
-  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
-  'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'
-];
-
-
-const generateCommentsId = createIdGenerator();
-const generatePhotoId = createIdGenerator();
-const generateUrlId = createIdGenerator();
-
-const createComments = () => {
-  const randomAvatar = getRandomInteger(MIN_NUMBER_AVATAR, MAX_NUMBER_AVATAR);
-
-  return {
-    id: (generateCommentsId()),
-    avatar: `img/avatar-${ randomAvatar }.svg`,
-    message: getRandomArrayElement(MESSAGE),
-    name: getRandomArrayElement(NAMES),
-  };
-};
-
-const createDescriptionPhoto = () =>{
-  const randomLikes = getRandomInteger(MIN_LIKES, MAX_LIKES);
-  return {
-    id: (generatePhotoId()),
-    url: `photos/${ generateUrlId() }.jpg`,
-    description: getRandomArrayElement(DESCRIPTION),
-    likes: randomLikes,
-    comments: Array.from({length: getRandomInteger(MIN_COMMENTS, MAX_COMMENTS)}, createComments)
-  };
-};
-
-const similarDescriptionPhoto = Array.from ({length: QUANTITY_ARRAYS}, createDescriptionPhoto);
-
-export {similarDescriptionPhoto};
diff --git a/js/filters.js b/js/filters.js
index 491ce75..24bf939 100644
--- a/js/filters.js
+++ b/js/filters.js
@@ -55,7 +55,7 @@ effects.none();
 let currentEffect = '';
 
 const onEffectsListClick = (evt) => {
-  let target = evt.target;
+  const target = evt.target;
 
   if (target.classList.contains('effects__preview')) {
     sliderElement.noUiSlider.set(Slider.MAX);
diff --git a/js/form-upload.js b/js/form-upload.js
index 2d6a606..2f7d3b3 100644
--- a/js/form-upload.js
+++ b/js/form-upload.js
@@ -3,6 +3,9 @@ import { validateHashtags, errorHashtags } from './validate-hashtags.js';
 import { validateDescription, errorDescription } from './validate-description.js';
 import { resetEffect } from './filters.js';
 import {resetZoom, changeZoom} from './zoom.js';
+import { sendData } from './api.js';
+import { showAlertSucces } from './alert-success.js';
+import {showAlertError} from './alert-error.js';
 
 const imgUploadForm = document.querySelector('.img-upload__form');
 const imgUploadSubmit = imgUploadForm.querySelector('.img-upload__submit');
@@ -113,3 +116,24 @@ inputHashtags.addEventListener('input', onHashtagsInput);
 
 pristine.addValidator(inputDescription, validateDescription, errorDescription, 2, false);
 inputDescription.addEventListener('input', onDescriptionInput);
+
+const onFormImgUploadSubmit = (evt) => {
+  evt.preventDefault();
+  imgUploadSubmit.disabled = true;
+
+  const formData = new FormData(imgUploadForm);
+
+  sendData(formData)
+    .then(() => {
+      showAlertSucces();
+      formImgUploadClose();
+    })
+    .catch((err) => {
+      showAlertError(err.message);
+    })
+    .finally(() => {
+      imgUploadSubmit.disabled = false;
+    });
+};
+
+imgUploadForm.addEventListener('submit', onFormImgUploadSubmit);
diff --git a/js/insert-thumbnails.js b/js/insert-thumbnails.js
index 528bc89..9334109 100644
--- a/js/insert-thumbnails.js
+++ b/js/insert-thumbnails.js
@@ -1,12 +1,17 @@
-import {similarDescriptionPhoto} from './create-pictures-description.js';
 import {createThumbnail} from './rendering-pictures.js';
+import {getData} from './api.js';
+import {showPopup} from './popup-error.js';
 
-const pictures = document.querySelector('.pictures');
+const picturesContainer = document.querySelector('.pictures');
 const fragment = document.createDocumentFragment();
 
-similarDescriptionPhoto.forEach((photo) => {
-  fragment.append(createThumbnail(photo));
-  pictures.append(fragment);
-});
+const insertThumbnails = (pictures) => {
+  pictures.forEach((photo) => {
+    fragment.append(createThumbnail(photo));
+    picturesContainer.append(fragment);
+  });
+};
 
-export {similarDescriptionPhoto};
+getData()
+  .then((pictures)=> insertThumbnails(pictures))
+  .catch((err) => showPopup(err.message));
diff --git a/js/main.js b/js/main.js
index 99af3c6..deb6e4e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,3 @@
-import {similarDescriptionPhoto} from './insert-thumbnails.js';
+import './insert-thumbnails.js';
 import './form-upload.js';
 import './filters.js';
-
-similarDescriptionPhoto();
diff --git a/js/popup-error.js b/js/popup-error.js
new file mode 100644
index 0000000..f3521ea
--- /dev/null
+++ b/js/popup-error.js
@@ -0,0 +1,18 @@
+const popupErroreTemplate = document.querySelector('#data-error').content;
+
+const showPopup = (message) => {
+  const popupError = popupErroreTemplate.cloneNode(true);
+
+  const popupTitle = popupError.querySelector('.data-error__title');
+  popupTitle.textContent = message;
+
+  document.body.append(popupError);
+
+  setTimeout(removePopup, 5000);
+};
+
+function removePopup(){
+  document.querySelector('.data-error').remove();
+}
+
+export { showPopup };
diff --git a/js/utils.js b/js/utils.js
index ff43f48..c302785 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,29 +1,4 @@
-// возвращает рандомное число в диапазоне от a до b
-const getRandomInteger = (a, b) => {
-  const lower = Math.ceil(Math.min(a, b));
-  const upper = Math.floor(Math.max(a, b));
-  const result = Math.random() * (upper - lower + 1) + lower;
-  return Math.floor(result);
-};
-
-// возвращает рандомный элемент переданного массива
-const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
-
-//возвращает id по порядку с 1
-function createIdGenerator () {
-  let lastGeneratedId = 0;
-  return function () {
-    lastGeneratedId += 1;
-    return lastGeneratedId;
-  };
-}
-
 //Проверка на escape
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export {
-  getRandomInteger,
-  getRandomArrayElement,
-  createIdGenerator,
-  isEscapeKey
-};
+export {isEscapeKey};