From 3351b040d6c0cb6b904305549d58f628e794f394 Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Tue, 21 Apr 2026 14:28:54 +0300
Subject: [PATCH 1/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D1=8E=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html          |  5 ++--
 js/big-picture.js   | 18 ++++++-------
 js/image-form.js    | 61 +++++++++++++++++++++++++++++++++++++++++++++
 js/main.js          |  2 ++
 js/util.js          |  1 -
 js/validate-form.js | 52 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 127 insertions(+), 12 deletions(-)
 create mode 100644 js/image-form.js
 create mode 100644 js/validate-form.js

diff --git a/index.html b/index.html
index 8ba05e1..65c6d06 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@ <h2 class="pictures__title  visually-hidden">Фотографии других 
       <section class="img-upload">
         <div class="img-upload__wrapper">
           <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
-          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+          <form class="img-upload__form" id="upload-select-image" method="post" action=" https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -40,7 +40,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
             </fieldset>
 
             <!-- Форма редактирования изображения -->
-            <div class="img-upload__overlay  hidden">
+            <div class="img-upload__overlay hidden">
               <div class="img-upload__wrapper">
                 <div class="img-upload__preview-container">
 
@@ -235,6 +235,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
   <script src="js/functions.js"></script>
+  <script src="vendor/pristine/pristine.min.js"></script>
   <script src="js/main.js" type="module"></script>
 </body>
 
diff --git a/js/big-picture.js b/js/big-picture.js
index 87ef0a9..a3e3e4e 100644
--- a/js/big-picture.js
+++ b/js/big-picture.js
@@ -21,16 +21,14 @@ let currentComments = [];
 const onEscKeyDown = (evt) => {
   if (isEscapeKey(evt)) {
     closeBigPicture();
-    deleteComments();
   }
 };
 
 const onPictureCancelClick = () => {
   closeBigPicture();
-  deleteComments();
 };
 
-const renderNewCommentsStep = () => {
+const onShowMoreButtonClick = () => {
   const renderingNewComments = currentComments.slice(commentCount, commentCount + COMMENTS__STEP);
   const newCommentsLength = renderingNewComments.length += commentCount;
   const fragment = document.createDocumentFragment();
@@ -57,17 +55,17 @@ const renderNewCommentsStep = () => {
 
 const renderComments = (currentPhotoComments) => {
   currentComments = currentPhotoComments;
-  renderNewCommentsStep();
+  onShowMoreButtonClick();
 
-  buttonLoader.addEventListener('click', renderNewCommentsStep);
+  buttonLoader.addEventListener('click', onShowMoreButtonClick);
 };
 
-function deleteComments () {
+const deleteComments = () => {
   socialComments.innerHTML = '';
   commentCount = 0;
   buttonLoader.classList.remove('hidden');
-  buttonLoader.removeEventListener('click', renderNewCommentsStep);
-}
+  buttonLoader.removeEventListener('click', onShowMoreButtonClick);
+};
 
 const renderBigPicture = (currentPhoto) => {
   bigPictureImage.src = currentPhoto.url;
@@ -78,6 +76,8 @@ const renderBigPicture = (currentPhoto) => {
 };
 
 function closeBigPicture () {
+  deleteComments();
+
   bigPicture.classList.add('hidden');
   document.querySelector('body').classList.remove('modal-open');
   document.removeEventListener('keydown', onEscKeyDown);
@@ -111,5 +111,5 @@ const setPicturesListener = (photos) => {
   usersPhotoList.addEventListener('click', (evt) => onPictureContainerClick(evt, photos));
 };
 
-export { setPicturesListener };
+export { setPicturesListener, onEscKeyDown };
 
diff --git a/js/image-form.js b/js/image-form.js
new file mode 100644
index 0000000..9fa82dc
--- /dev/null
+++ b/js/image-form.js
@@ -0,0 +1,61 @@
+import { isEscapeKey } from './util';
+import { errorText, validHashtags, validComment } from './validate-form';
+
+const uploadForm = document.querySelector('.img-upload__form');
+const uploadInput = uploadForm.querySelector('.img-upload__input');
+const formOverlay = uploadForm.querySelector('.img-upload__overlay');
+const buttonCloseUpload = uploadForm.querySelector('.img-upload__cancel');
+const hashtagsInput = uploadForm.querySelector('.text__hashtags');
+const commentInput = uploadForm.querySelector('.text__description');
+
+
+const onEscKeyDown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    if(document.activeElement === hashtagsInput || document.activeElement === commentInput) {
+      evt.stopPropagation();
+    } else {
+      closeUploadModal();
+      uploadForm.reset();
+    }
+  }
+};
+
+const onUploadCancelClick = () => {
+  closeUploadModal();
+};
+
+function closeUploadModal () {
+  formOverlay.classList.add('hidden');
+  document.querySelector('body').classList.remove('.modal-open');
+  document.removeEventListener('keydown', onEscKeyDown);
+  buttonCloseUpload.removeEventListener('click', onUploadCancelClick);
+  uploadInput.value = '';
+  commentInput.value = '';
+}
+
+const uploadModal = () => {
+  uploadInput.addEventListener('change', () => {
+    formOverlay.classList.remove('hidden');
+    document.querySelector('body').classList.add('.modal-open');
+    document.addEventListener('keydown', onEscKeyDown);
+    buttonCloseUpload.addEventListener('click', onUploadCancelClick);
+  });
+};
+
+const pristineHashtags = new Pristine(uploadForm, {
+  classTo: 'img-upload__form',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+});
+
+const pristineComment = new Pristine(uploadForm, {
+  classTo: 'img-upload__form',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+});
+
+pristineHashtags.addValidator(hashtagsInput, validHashtags, errorText);
+pristineComment.addValidator(commentInput, validComment, errorText);
+
+export { uploadModal };
diff --git a/js/main.js b/js/main.js
index eee8ed0..0771641 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,9 +1,11 @@
 import { generatePhotos } from './generator';
 import { renderThumbnails } from './render-thumbnails';
 import { setPicturesListener } from './big-picture';
+import { uploadModal } from './image-form';
 
 const photos = generatePhotos();
 renderThumbnails(photos);
 setPicturesListener(photos);
+uploadModal();
 
 
diff --git a/js/util.js b/js/util.js
index 920a85e..1ca7757 100644
--- a/js/util.js
+++ b/js/util.js
@@ -27,5 +27,4 @@ const getRandomArrayElement = (elements) => elements[getRandomInteger(0, element
 const isEscapeKey = (evt) => evt.key === 'Escape';
 const isEnterKey = (evt) => evt.key === 'Enter';
 
-
 export { getRandomInteger, createPreviousRangeGenerator, getRandomArrayElement, isEscapeKey, isEnterKey };
diff --git a/js/validate-form.js b/js/validate-form.js
new file mode 100644
index 0000000..63c88bf
--- /dev/null
+++ b/js/validate-form.js
@@ -0,0 +1,52 @@
+const MAX_QUATITY = 5;
+
+let errorMessage = '';
+
+const errorText = () => errorMessage;
+
+function validHashtags (value) {
+  const inputText = value.toLowerCase().trim();
+  const inputArray = inputText.split(' ');
+
+  if(inputText.length === 0){
+    return true;
+  }
+
+  const checksArray = [
+    {
+      check: inputArray.some((element) => !/^#[a-zа-яё1-9]{1,19}$/i.test(element)),
+      error: 'Не допустимые символы!'
+    },
+    {
+      check: inputArray.length > MAX_QUATITY,
+      error: `Не более ${MAX_QUATITY} хэштегов!`
+    },
+    {
+      check: inputArray.some((element, num, Array) => Array.includes(element, num + 1)),
+      error: 'Хэштэги не должны повторяться!'
+    },
+  ];
+
+  const checks = checksArray.every((elem) => {
+    const isInvalid = elem.check;
+    if(isInvalid) {
+      errorMessage = elem.error;
+    }
+    return(!isInvalid);
+  });
+
+  return checks;
+}
+
+function validComment (value) {
+  const inputCommentArray = value;
+  inputCommentArray.split(' ');
+
+  const isInvalid = inputCommentArray.length > 140;
+  if (isInvalid){
+    errorMessage = 'Не более 140 символов!';
+  }
+  return (!isInvalid);
+}
+
+export { errorText, validHashtags, validComment};

From d608c7a3677ea959b25020cfa759a3e08f0967ad Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Tue, 21 Apr 2026 14:40:14 +0300
Subject: [PATCH 2/6] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/validate-form.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/validate-form.js b/js/validate-form.js
index 63c88bf..0cab790 100644
--- a/js/validate-form.js
+++ b/js/validate-form.js
@@ -27,10 +27,10 @@ function validHashtags (value) {
     },
   ];
 
-  const checks = checksArray.every((elem) => {
-    const isInvalid = elem.check;
+  const checks = checksArray.every((element) => {
+    const isInvalid = element.check;
     if(isInvalid) {
-      errorMessage = elem.error;
+      errorMessage = element.error;
     }
     return(!isInvalid);
   });

From 021cd900171751c4af2f52396b8ef42a09bd2a0b Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Fri, 24 Apr 2026 10:00:30 +0300
Subject: [PATCH 3/6] =?UTF-8?q?=D0=BF=D0=BE=D0=B2=D1=82=D0=BE=D1=80=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=BE=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA?=
 =?UTF-8?q?=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                |  2 ++
 js/form/image-form.js     | 54 ++++++++++++++++++++++++++++++
 js/form/image-scale.js    | 26 +++++++++++++++
 js/form/slider-effect.js  | 18 ++++++++++
 js/form/slider-options.js | 48 +++++++++++++++++++++++++++
 js/form/validation.js     | 70 +++++++++++++++++++++++++++++++++++++++
 js/image-form.js          | 61 ----------------------------------
 js/main.js                |  5 ++-
 js/validate-form.js       | 52 -----------------------------
 9 files changed, 220 insertions(+), 116 deletions(-)
 create mode 100644 js/form/image-form.js
 create mode 100644 js/form/image-scale.js
 create mode 100644 js/form/slider-effect.js
 create mode 100644 js/form/slider-options.js
 create mode 100644 js/form/validation.js
 delete mode 100644 js/image-form.js
 delete mode 100644 js/validate-form.js

diff --git a/index.html b/index.html
index 65c6d06..51cbea2 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet"> href="vendor/nouislider/nouislider.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
 </head>
@@ -235,6 +236,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
   <script src="js/functions.js"></script>
+  <script src="vendor/nouislider/nouislider.js"></script>
   <script src="vendor/pristine/pristine.min.js"></script>
   <script src="js/main.js" type="module"></script>
 </body>
diff --git a/js/form/image-form.js b/js/form/image-form.js
new file mode 100644
index 0000000..5a816f4
--- /dev/null
+++ b/js/form/image-form.js
@@ -0,0 +1,54 @@
+import { isEscapeKey } from '../util';
+import { onButtonSmallerClick, onButtonBiggerClick } from './image-scale';
+import { initValidation } from './validation';
+
+const uploadForm = document.querySelector('.img-upload__form');
+const uploadInput = uploadForm.querySelector('.img-upload__input');
+const formOverlay = uploadForm.querySelector('.img-upload__overlay');
+const buttonCloseUpload = uploadForm.querySelector('.img-upload__cancel');
+const hashtagsInput = uploadForm.querySelector('.text__hashtags');
+const descriptionInput = uploadForm.querySelector('.text__description');
+const buttonSmaller = document.querySelector('.scale__control--smaller');
+const buttonBigger = document.querySelector('.scale__control--bigger');
+
+
+const onEscKeyDown = (evt) => {
+  if (isEscapeKey(evt) && (document.activeElement !== hashtagsInput || document.activeElement !== descriptionInput)) {
+    closeUploadModal();
+    uploadForm.reset();
+  }
+};
+const onUploadCancelClick = () => {
+  closeUploadModal();
+};
+
+function closeUploadModal () {
+  formOverlay.classList.add('hidden');
+  document.querySelector('body').classList.remove('.modal-open');
+  document.removeEventListener('keydown', onEscKeyDown);
+  buttonCloseUpload.removeEventListener('click', onUploadCancelClick);
+  buttonSmaller.addEventListener('click', onButtonSmallerClick);
+  buttonBigger.removeEventListener('click', onButtonBiggerClick);
+  buttonSmaller.removeEventListener('click', onButtonSmallerClick);
+
+  uploadForm.reset();
+}
+
+const openUploadModal = () =>{
+  formOverlay.classList.remove('hidden');
+  document.querySelector('body').classList.add('.modal-open');
+  document.addEventListener('keydown', onEscKeyDown);
+  buttonCloseUpload.addEventListener('click', onUploadCancelClick);
+  buttonSmaller.addEventListener('click', onButtonSmallerClick);
+  buttonBigger.addEventListener('click', onButtonBiggerClick);
+
+  initValidation();
+};
+
+const initUploadModal = () => {
+  uploadInput.addEventListener('change', () => {
+    openUploadModal();
+  });
+};
+
+export { initUploadModal };
diff --git a/js/form/image-scale.js b/js/form/image-scale.js
new file mode 100644
index 0000000..407c228
--- /dev/null
+++ b/js/form/image-scale.js
@@ -0,0 +1,26 @@
+const scaleValue = document.querySelector('.scale__control--value');
+const imagePrewiev = document.querySelector('.img-upload__preview img');
+
+let scale = 1;
+const SCALE_STEP = 0.25;
+
+
+const onButtonSmallerClick = () => {
+
+  if(scale > SCALE_STEP) {
+    scale -= SCALE_STEP;
+    imagePrewiev.style.transform = `scale(${scale})`;
+    scaleValue.value = `${scale * 100}%`;
+  }
+};
+
+const onButtonBiggerClick = () => {
+
+  if(scale < 1) {
+    scale += SCALE_STEP;
+    imagePrewiev.style.transform = `scale(${scale})`;
+    scaleValue.value = `${scale * 100}%`;
+  }
+};
+
+export { onButtonSmallerClick, onButtonBiggerClick };
diff --git a/js/form/slider-effect.js b/js/form/slider-effect.js
new file mode 100644
index 0000000..9f6fc7b
--- /dev/null
+++ b/js/form/slider-effect.js
@@ -0,0 +1,18 @@
+import { SLIDER_EFFECT_OPTIONS } from './slider-options';
+
+const imagePrewiev = document.querySelector('.img-upload__preview img');
+const sliderContainer = document.querySelector('.img-upload__effect-level');
+const effectLevelValue = document.querySelector('.effect-level__value');
+const effectList = document.querySelector('.effects__list');
+const effectSlider = document.querySelector('.effect-level__slider');
+
+noUiSlider.create(effectSlider, {
+  connect: 'lower',
+  range: {
+    'min': 0,
+    'max': 100
+  },
+  start: 100,
+  step: 0.1,
+});
+
diff --git a/js/form/slider-options.js b/js/form/slider-options.js
new file mode 100644
index 0000000..646fb44
--- /dev/null
+++ b/js/form/slider-options.js
@@ -0,0 +1,48 @@
+const SLIDER_EFFECT_OPTIONS = {
+  none: {
+    filter: 'none',
+    min: 0,
+    max: 100,
+    step: 1,
+    start: 100,
+    measure: '',
+  },
+  chrome: {
+    filter: 'grayscale',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    start: 100,
+    measure: '',
+  },
+  sepia: {
+    filter: 'sepia',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    measure: '',
+  },
+  marvin: {
+    filter: 'invert',
+    min: 0,
+    max: 100,
+    step: 1,
+    measure: '%',
+  },
+  phobos: {
+    filter: 'blur',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    measure: 'px',
+  },
+  heat: {
+    filter: 'brightness',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    measure: '',
+  },
+};
+
+export { SLIDER_EFFECT_OPTIONS };
diff --git a/js/form/validation.js b/js/form/validation.js
new file mode 100644
index 0000000..d398286
--- /dev/null
+++ b/js/form/validation.js
@@ -0,0 +1,70 @@
+const uploadForm = document.querySelector('.img-upload__form');
+const hashtagsInput = uploadForm.querySelector('.text__hashtags');
+const descriptionInput = uploadForm.querySelector('.text__description');
+
+const MAX_QUATITY = 5;
+const MAX_QUANTITY_SIMBOL = 140;
+
+let errorMessage = '';
+
+const pristine = new Pristine(uploadForm, {
+  classTo: 'img-upload__form',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+});
+
+const checkRules = [
+  {
+    check: (inputArray) => inputArray.some((element) => !/^#[a-zа-яё1-9]{1,19}$/i.test(element)),
+    error: 'Не допустимые символы!'
+  },
+  {
+    check: (inputArray) => inputArray.length > MAX_QUATITY,
+    error: `Не более ${MAX_QUATITY} хэштегов!`
+  },
+  {
+    check: (inputArray) => inputArray.some((element, num, Array) => Array.includes(element, num + 1)),
+    error: 'Хэштэги не должны повторяться!'
+  },
+];
+
+const validHashtags = (value) => {
+  const inputText = value.toLowerCase().trim();
+  const inputArray = inputText.split(' ');
+
+  if(inputText.length === 0){
+    return true;
+  }
+
+  const checks = checkRules.every((ruleValidate) => {
+    const isInvalid = ruleValidate.check(inputArray);
+
+    if(isInvalid) {
+      errorMessage = ruleValidate.error;
+    }
+
+    return !isInvalid;
+  });
+
+  return checks;
+};
+
+const validDescription = (value) => {
+  const inputCommentArray = value;
+  inputCommentArray.split(' ');
+
+  const isInvalid = inputCommentArray.length > MAX_QUANTITY_SIMBOL;
+
+  if (isInvalid){
+    errorMessage = `Не более ${MAX_QUANTITY_SIMBOL} символов!`;
+  }
+
+  return !isInvalid;
+};
+
+const initValidation = () => {
+  pristine.addValidator(hashtagsInput, validHashtags, () => errorMessage);
+  pristine.addValidator(descriptionInput, validDescription, () => errorMessage);
+};
+
+export { initValidation };
diff --git a/js/image-form.js b/js/image-form.js
deleted file mode 100644
index 9fa82dc..0000000
--- a/js/image-form.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { isEscapeKey } from './util';
-import { errorText, validHashtags, validComment } from './validate-form';
-
-const uploadForm = document.querySelector('.img-upload__form');
-const uploadInput = uploadForm.querySelector('.img-upload__input');
-const formOverlay = uploadForm.querySelector('.img-upload__overlay');
-const buttonCloseUpload = uploadForm.querySelector('.img-upload__cancel');
-const hashtagsInput = uploadForm.querySelector('.text__hashtags');
-const commentInput = uploadForm.querySelector('.text__description');
-
-
-const onEscKeyDown = (evt) => {
-  if (isEscapeKey(evt)) {
-    evt.preventDefault();
-    if(document.activeElement === hashtagsInput || document.activeElement === commentInput) {
-      evt.stopPropagation();
-    } else {
-      closeUploadModal();
-      uploadForm.reset();
-    }
-  }
-};
-
-const onUploadCancelClick = () => {
-  closeUploadModal();
-};
-
-function closeUploadModal () {
-  formOverlay.classList.add('hidden');
-  document.querySelector('body').classList.remove('.modal-open');
-  document.removeEventListener('keydown', onEscKeyDown);
-  buttonCloseUpload.removeEventListener('click', onUploadCancelClick);
-  uploadInput.value = '';
-  commentInput.value = '';
-}
-
-const uploadModal = () => {
-  uploadInput.addEventListener('change', () => {
-    formOverlay.classList.remove('hidden');
-    document.querySelector('body').classList.add('.modal-open');
-    document.addEventListener('keydown', onEscKeyDown);
-    buttonCloseUpload.addEventListener('click', onUploadCancelClick);
-  });
-};
-
-const pristineHashtags = new Pristine(uploadForm, {
-  classTo: 'img-upload__form',
-  errorTextParent: 'img-upload__field-wrapper',
-  errorTextClass: 'img-upload__field-wrapper--error',
-});
-
-const pristineComment = new Pristine(uploadForm, {
-  classTo: 'img-upload__form',
-  errorTextParent: 'img-upload__field-wrapper',
-  errorTextClass: 'img-upload__field-wrapper--error',
-});
-
-pristineHashtags.addValidator(hashtagsInput, validHashtags, errorText);
-pristineComment.addValidator(commentInput, validComment, errorText);
-
-export { uploadModal };
diff --git a/js/main.js b/js/main.js
index 0771641..368413a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,11 +1,10 @@
 import { generatePhotos } from './generator';
 import { renderThumbnails } from './render-thumbnails';
 import { setPicturesListener } from './big-picture';
-import { uploadModal } from './image-form';
+import { initUploadModal } from './form/image-form';
 
 const photos = generatePhotos();
 renderThumbnails(photos);
 setPicturesListener(photos);
-uploadModal();
-
+initUploadModal();
 
diff --git a/js/validate-form.js b/js/validate-form.js
deleted file mode 100644
index 0cab790..0000000
--- a/js/validate-form.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const MAX_QUATITY = 5;
-
-let errorMessage = '';
-
-const errorText = () => errorMessage;
-
-function validHashtags (value) {
-  const inputText = value.toLowerCase().trim();
-  const inputArray = inputText.split(' ');
-
-  if(inputText.length === 0){
-    return true;
-  }
-
-  const checksArray = [
-    {
-      check: inputArray.some((element) => !/^#[a-zа-яё1-9]{1,19}$/i.test(element)),
-      error: 'Не допустимые символы!'
-    },
-    {
-      check: inputArray.length > MAX_QUATITY,
-      error: `Не более ${MAX_QUATITY} хэштегов!`
-    },
-    {
-      check: inputArray.some((element, num, Array) => Array.includes(element, num + 1)),
-      error: 'Хэштэги не должны повторяться!'
-    },
-  ];
-
-  const checks = checksArray.every((element) => {
-    const isInvalid = element.check;
-    if(isInvalid) {
-      errorMessage = element.error;
-    }
-    return(!isInvalid);
-  });
-
-  return checks;
-}
-
-function validComment (value) {
-  const inputCommentArray = value;
-  inputCommentArray.split(' ');
-
-  const isInvalid = inputCommentArray.length > 140;
-  if (isInvalid){
-    errorMessage = 'Не более 140 символов!';
-  }
-  return (!isInvalid);
-}
-
-export { errorText, validHashtags, validComment};

From 2581a20f45138ee8942b75d88606a58dae062cba Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Fri, 24 Apr 2026 10:17:49 +0300
Subject: [PATCH 4/6] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 51cbea2..9562ed8 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet"> href="vendor/nouislider/nouislider.css">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
 </head>

From 1afb4122abc0b301524342acaac78cd0d89a5349 Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Wed, 29 Apr 2026 22:06:51 +0300
Subject: [PATCH 5/6] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=20=D1=81=D0=BB=D0=B0=D0=B9=D0=B4=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/form/image-form.js    | 15 +++-----
 js/form/image-scale.js   | 17 +++++++--
 js/form/slider-effect.js | 82 +++++++++++++++++++++++++++++++++-------
 js/main.js               |  1 +
 4 files changed, 88 insertions(+), 27 deletions(-)

diff --git a/js/form/image-form.js b/js/form/image-form.js
index 5a816f4..adca43c 100644
--- a/js/form/image-form.js
+++ b/js/form/image-form.js
@@ -1,6 +1,7 @@
 import { isEscapeKey } from '../util';
-import { onButtonSmallerClick, onButtonBiggerClick } from './image-scale';
+import { initScale, resetScale } from './image-scale';
 import { initValidation } from './validation';
+import { initEffect, resetEffect } from './slider-effect';
 
 const uploadForm = document.querySelector('.img-upload__form');
 const uploadInput = uploadForm.querySelector('.img-upload__input');
@@ -8,9 +9,6 @@ const formOverlay = uploadForm.querySelector('.img-upload__overlay');
 const buttonCloseUpload = uploadForm.querySelector('.img-upload__cancel');
 const hashtagsInput = uploadForm.querySelector('.text__hashtags');
 const descriptionInput = uploadForm.querySelector('.text__description');
-const buttonSmaller = document.querySelector('.scale__control--smaller');
-const buttonBigger = document.querySelector('.scale__control--bigger');
-
 
 const onEscKeyDown = (evt) => {
   if (isEscapeKey(evt) && (document.activeElement !== hashtagsInput || document.activeElement !== descriptionInput)) {
@@ -27,10 +25,9 @@ function closeUploadModal () {
   document.querySelector('body').classList.remove('.modal-open');
   document.removeEventListener('keydown', onEscKeyDown);
   buttonCloseUpload.removeEventListener('click', onUploadCancelClick);
-  buttonSmaller.addEventListener('click', onButtonSmallerClick);
-  buttonBigger.removeEventListener('click', onButtonBiggerClick);
-  buttonSmaller.removeEventListener('click', onButtonSmallerClick);
 
+  resetEffect();
+  resetScale();
   uploadForm.reset();
 }
 
@@ -39,9 +36,9 @@ const openUploadModal = () =>{
   document.querySelector('body').classList.add('.modal-open');
   document.addEventListener('keydown', onEscKeyDown);
   buttonCloseUpload.addEventListener('click', onUploadCancelClick);
-  buttonSmaller.addEventListener('click', onButtonSmallerClick);
-  buttonBigger.addEventListener('click', onButtonBiggerClick);
 
+  initEffect();
+  initScale();
   initValidation();
 };
 
diff --git a/js/form/image-scale.js b/js/form/image-scale.js
index 407c228..cd3ba75 100644
--- a/js/form/image-scale.js
+++ b/js/form/image-scale.js
@@ -1,12 +1,12 @@
 const scaleValue = document.querySelector('.scale__control--value');
 const imagePrewiev = document.querySelector('.img-upload__preview img');
+const buttonSmaller = document.querySelector('.scale__control--smaller');
+const buttonBigger = document.querySelector('.scale__control--bigger');
 
 let scale = 1;
 const SCALE_STEP = 0.25;
 
-
 const onButtonSmallerClick = () => {
-
   if(scale > SCALE_STEP) {
     scale -= SCALE_STEP;
     imagePrewiev.style.transform = `scale(${scale})`;
@@ -15,7 +15,6 @@ const onButtonSmallerClick = () => {
 };
 
 const onButtonBiggerClick = () => {
-
   if(scale < 1) {
     scale += SCALE_STEP;
     imagePrewiev.style.transform = `scale(${scale})`;
@@ -23,4 +22,14 @@ const onButtonBiggerClick = () => {
   }
 };
 
-export { onButtonSmallerClick, onButtonBiggerClick };
+const initScale = () => {
+  buttonSmaller.addEventListener('click', onButtonSmallerClick);
+  buttonBigger.addEventListener('click', onButtonBiggerClick);
+};
+
+const resetScale = () => {
+  buttonBigger.removeEventListener('click', onButtonBiggerClick);
+  buttonSmaller.removeEventListener('click', onButtonSmallerClick);
+};
+
+export { initScale, resetScale };
diff --git a/js/form/slider-effect.js b/js/form/slider-effect.js
index 9f6fc7b..57dd055 100644
--- a/js/form/slider-effect.js
+++ b/js/form/slider-effect.js
@@ -1,18 +1,72 @@
 import { SLIDER_EFFECT_OPTIONS } from './slider-options';
 
-const imagePrewiev = document.querySelector('.img-upload__preview img');
+const sliderElement = document.querySelector('.effect-level__slider');
 const sliderContainer = document.querySelector('.img-upload__effect-level');
-const effectLevelValue = document.querySelector('.effect-level__value');
-const effectList = document.querySelector('.effects__list');
-const effectSlider = document.querySelector('.effect-level__slider');
-
-noUiSlider.create(effectSlider, {
-  connect: 'lower',
-  range: {
-    'min': 0,
-    'max': 100
-  },
-  start: 100,
-  step: 0.1,
-});
+const imagePreview = document.querySelector('.img-upload__preview img');
+const effectList = document.querySelector('.img-upload__effects');
+const sliderEffectValue = document.querySelector('.effect-level__value');
 
+let currentEffect = 'none';
+
+const updateSliderEffect = (effect) => {
+  if(effect === 'none') {
+    sliderContainer.style.display = 'none';
+    imagePreview.style.filter = 'none';
+  } else {
+    sliderContainer.style.display = 'block';
+  }
+
+  sliderElement.noUiSlider.on('update', () => {
+    const sliderValue = sliderElement.noUiSlider.get();
+    sliderEffectValue.value = sliderValue;
+
+    const configSlider = SLIDER_EFFECT_OPTIONS[currentEffect];
+    if (currentEffect !== 'none') {
+      imagePreview.style.filter = `${configSlider.filter}(${sliderValue}${configSlider.measure})`;
+    }
+  });
+};
+
+const changeSliderOptions = () => {
+  const configSlider = SLIDER_EFFECT_OPTIONS[currentEffect];
+
+  sliderElement.noUiSlider.updateOptions({
+    range: {
+      min: configSlider.min,
+      max: configSlider.max
+    },
+    start: configSlider.max,
+    step: configSlider.step,
+    measure: configSlider.measure,
+  });
+
+  updateSliderEffect(currentEffect);
+};
+
+const initEffect = () => {
+  noUiSlider.create(sliderElement, {
+    connect: 'lower',
+    range: {
+      min: 0,
+      max: 100,
+    },
+    start: 100,
+    step: 0.1,
+  });
+
+  updateSliderEffect('none');
+
+  effectList.addEventListener('change', (evt) => {
+    if(evt.target.matches('.effects__radio')) {
+      currentEffect = evt.target.value;
+    }
+
+    changeSliderOptions();
+  });
+};
+
+const resetEffect = () => {
+  noUiSlider.destroy(sliderElement);
+};
+
+export { initEffect, resetEffect };
diff --git a/js/main.js b/js/main.js
index 368413a..1873c96 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,3 +8,4 @@ renderThumbnails(photos);
 setPicturesListener(photos);
 initUploadModal();
 
+

From 217c242b1f29acb4f48f4be5847937ab4a374afa Mon Sep 17 00:00:00 2001
From: Vitali3207 <makar3447@gmail.com>
Date: Thu, 30 Apr 2026 10:55:02 +0300
Subject: [PATCH 6/6] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/form/slider-effect.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/form/slider-effect.js b/js/form/slider-effect.js
index 57dd055..4417248 100644
--- a/js/form/slider-effect.js
+++ b/js/form/slider-effect.js
@@ -55,15 +55,15 @@ const initEffect = () => {
   });
 
   updateSliderEffect('none');
+};
 
-  effectList.addEventListener('change', (evt) => {
-    if(evt.target.matches('.effects__radio')) {
-      currentEffect = evt.target.value;
-    }
+effectList.addEventListener('change', (evt) => {
+  if(evt.target.matches('.effects__radio')) {
+    currentEffect = evt.target.value;
+  }
 
-    changeSliderOptions();
-  });
-};
+  changeSliderOptions();
+});
 
 const resetEffect = () => {
   noUiSlider.destroy(sliderElement);