Фото на память

js/main.js

@@ -6,13 +6,15 @@ import { initForm } from './ui/form/index.js';
 import { showAlert } from './ui/messages.js';
 import { initFilters } from './ui/form/filter.js';
 import { debounce } from './utils/common.js';
+import { initUploadImage } from './ui/form/upload-image.js';
 
 const dom = {
   container: document.querySelector('.pictures'),
   template: document.querySelector('#picture')?.content?.querySelector('.picture'),
   filters: document.querySelector('.img-filters'),
 };
 
+initUploadImage();
 initBigPicture();
 initCommentsLoader();
 initForm();

js/ui/big-picture/comments.js

@@ -1,4 +1,4 @@
-import { COMMENTS_PER_PORTION } from '../../mock/const/data';
+const COMMENTS_PER_PORTION = 5;
 
 const commentsList = document.querySelector('.social__comments');
 const commentsLoader = document.querySelector('.comments-loader');

js/ui/form/effect.js

@@ -15,6 +15,8 @@ const EFFECTS_MAP = Object.fromEntries(
 
 let chosenEffect = DEFAULT_EFFECT;
 
+let currentEffectClass = null;
+
 const imageElement = document.querySelector('.img-upload__preview img');
 const effectsElement = document.querySelector('.effects');
 const sliderElement = document.querySelector('.effect-level__slider');
@@ -31,15 +33,23 @@ const hideSlider = () => {
   sliderContainerElement.classList.add('hidden');
 };
 
-const removeEffectClasses = () => {
-  EFFECTS.forEach((effect) => {
-    imageElement.classList.remove(`effects__preview--${effect.name}`);
-  });
+const removeCurrentEffectClass = () => {
+  if (currentEffectClass) {
+    imageElement.classList.remove(currentEffectClass);
+    currentEffectClass = null;
+  }
 };
 
 const applyEffectClass = () => {
-  removeEffectClasses();
-  imageElement.classList.add(`effects__preview--${chosenEffect.name}`);
+  removeCurrentEffectClass();
+
+  if (isDefault()) {
+    return;
+  }
+
+  const newClass = `effects__preview--${chosenEffect.name}`;
+  imageElement.classList.add(newClass);
+  currentEffectClass = newClass;
 };
 
 const updateSlider = () => {
@@ -83,7 +93,8 @@ const onSliderUpdate = () => {
 const resetEffects = () => {
   chosenEffect = DEFAULT_EFFECT;
 
-  removeEffectClasses();
+  removeCurrentEffectClass();
+
   imageElement.style.filter = 'none';
   effectLevelElement.value = '';
 

js/ui/form/index.js

@@ -12,7 +12,6 @@ const initForm = () => {
     resetValidation();
   });
 
-
   initScale();
   initEffects();
   initSubmit({

js/ui/form/modal.js

@@ -44,8 +44,11 @@ const isTextFieldFocused = () =>
   document.activeElement === hashtagField ||
   document.activeElement === commentField;
 
+const isMessageShown = () =>
+  Boolean(document.querySelector('.error, .success'));
+
 function onDocumentKeydown(evt) {
-  if (isEscapeKey(evt) && !isTextFieldFocused()) {
+  if (isEscapeKey(evt) && !isTextFieldFocused() && !isMessageShown()) {
     evt.preventDefault();
     hideModal();
   }

js/ui/form/upload-image.js

@@ -0,0 +1,42 @@
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+
+const form = document.querySelector('.img-upload__form');
+const fileField = form.querySelector('.img-upload__input');
+const photoPreview = form.querySelector('.img-upload__preview img');
+const effectsPreviews = form.querySelectorAll('.effects__preview');
+
+let currentUrl;
+
+const initUploadImage = () => {
+  fileField.addEventListener('change', () => {
+    const file = fileField.files[0];
+    if (!file) {
+      return;
+    }
+
+    const fileName = file.name.toLowerCase();
+
+    const isValid =
+      FILE_TYPES.some((ext) => fileName.endsWith(ext)) &&
+      file.type.startsWith('image/');
+
+    if (!isValid) {
+      return;
+    }
+
+    if (currentUrl) {
+      URL.revokeObjectURL(currentUrl);
+      currentUrl = null;
+    }
+
+    currentUrl = URL.createObjectURL(file);
+
+    photoPreview.src = currentUrl;
+
+    effectsPreviews.forEach((preview) => {
+      preview.style.backgroundImage = `url(${currentUrl})`;
+    });
+  });
+};
+
+export { initUploadImage };

js/utils/random.js

@@ -1,16 +1,4 @@
 const getRandomInteger = (min, max) => {
-  if (min === undefined || max === undefined) {
-    throw new TypeError('Both min and max must be provided');
-  }
-
-  if (typeof min !== 'number' || typeof max !== 'number') {
-    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');
-  }
-
   const lower = Math.ceil(Math.min(min, max));
   const upper = Math.floor(Math.max(min, max));
 
@@ -21,12 +9,6 @@ const getRandomInteger = (min, max) => {
   return Math.floor(Math.random() * (upper - lower + 1)) + lower;
 };
 
-const getRandomItem = (items) => {
-  if (!Array.isArray(items) || items.length === 0) {
-    throw new TypeError('Items must be a non-empty array');
-  }
-
-  return items[getRandomInteger(0, items.length - 1)];
-};
+const getRandomItem = (items) => items[getRandomInteger(0, items.length - 1)];
 
 export { getRandomInteger, getRandomItem };