From c212453e8329bb340c61f22539220bf32eaa9b29 Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Sun, 2 Mar 2025 00:13:54 +0500
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=B0=D1=82=D1=80=D0=B8=D0=B1=D1=83?=
 =?UTF-8?q?=D1=82=D1=8B=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html         | 2 +-
 js/modules/form.js | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 js/modules/form.js

diff --git a/index.html b/index.html
index e97cccf..5b0dc39 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,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" action="https://31.javascript.htmlacademy.pro/kekstagram" method="post" enctype="multipart/form-data" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
diff --git a/js/modules/form.js b/js/modules/form.js
new file mode 100644
index 0000000..e69de29

From f3ddfdc085ceeb091741cfc7122d6caf4e5e6731 Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Tue, 4 Mar 2025 06:45:13 +0500
Subject: [PATCH 2/6] =?UTF-8?q?feat:=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?=D0=B8=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=B8=20=D0=B7=D0=B0=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D1=8F=20=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                |  1 +
 js/main.js                |  1 +
 js/modules/form.js        |  0
 js/modules/upload-form.js | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 35 insertions(+)
 delete mode 100644 js/modules/form.js
 create mode 100644 js/modules/upload-form.js

diff --git a/index.html b/index.html
index 5b0dc39..82e9827 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <script src="./js/functions.js" defer></script>
   <script src="./js/main.js" type="module" defer></script>
+  <script src="./vendor/pristine/pristine.min.js" defer></script>
 
   <title>Кекстаграм</title>
 </head>
diff --git a/js/main.js b/js/main.js
index f3143e9..3ef2337 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,6 @@
 import { photoslist } from './modules/photo-template.js';
 import { displaysPictures } from './modules/photo-template.js';
+import './modules/upload-form.js';
 
 displaysPictures(photoslist);
 
diff --git a/js/modules/form.js b/js/modules/form.js
deleted file mode 100644
index e69de29..0000000
diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
new file mode 100644
index 0000000..b035826
--- /dev/null
+++ b/js/modules/upload-form.js
@@ -0,0 +1,33 @@
+import { isEscapeKey } from './util';
+
+const formUpload = document.querySelector('.img-upload__form');
+const imageUploadInput = formUpload.querySelector('.img-upload__input');
+const imageOverlay = formUpload.querySelector('.img-upload__overlay');
+const imageUploadCancle = formUpload.querySelector('.img-upload__cancel');
+const uploadHashtag = formUpload.querySelector('.text__hashtags');
+
+const pristine = new Pristine(formUpload);
+
+const onDocumentKeyDown = (evt) => {
+  if(isEscapeKey(evt)){
+    evt.preventDefault();
+    closeUploadWindow();
+  }
+};
+
+const openUploadWindow = () => {
+  imageOverlay.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeyDown);
+};
+
+function closeUploadWindow() {
+  imageUploadInput.value = '';
+  imageOverlay.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeyDown);
+}
+
+imageUploadInput.addEventListener('change', openUploadWindow);
+
+imageUploadCancle.addEventListener('click', closeUploadWindow);

From 78d72df14c71663114b9b8297615f946512c866a Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Tue, 4 Mar 2025 23:30:43 +0500
Subject: [PATCH 3/6] =?UTF-8?q?feat:=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20pristine=20=D0=B8=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B0?=
 =?UTF-8?q?=D1=82=D1=80=D0=B8=D0=B1=D1=83=D1=82=D1=8B=20=D0=B2=20html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                |  5 ++---
 js/modules/upload-form.js | 10 ++++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 82e9827..4be99ba 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <script src="./js/functions.js" defer></script>
   <script src="./js/main.js" type="module" defer></script>
-  <script src="./vendor/pristine/pristine.min.js" defer></script>
 
   <title>Кекстаграм</title>
 </head>
@@ -120,7 +119,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                 <!-- Добавление хэштегов и комментария к изображению -->
                 <fieldset class="img-upload__text text">
                   <div class="img-upload__field-wrapper">
-                    <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
+                    <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег" maxlength="20" data-pristine-pattern="/^#[a-zф-яё0-9]{1,19}$/i">
                   </div>
                   <div class="img-upload__field-wrapper">
                     <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
@@ -237,7 +236,7 @@ <h2 class="success__title">Изображение успешно загруже
       <h2 class="data-error__title">Не удалось загрузить данные</h2>
     </section>
   </template>
-
+  <script src="./vendor/pristine/pristine.min.js"></script>
 </body>
 
 </html>
diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
index b035826..da0364d 100644
--- a/js/modules/upload-form.js
+++ b/js/modules/upload-form.js
@@ -31,3 +31,13 @@ function closeUploadWindow() {
 imageUploadInput.addEventListener('change', openUploadWindow);
 
 imageUploadCancle.addEventListener('click', closeUploadWindow);
+
+formUpload.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  const isValid = pristine.validate();
+  if(isValid){
+    console.log('valid');
+  } else{
+    console.log('novalid');
+  }
+});

From 1a15b21b97640f938a0330dfce5687c13122b2b5 Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Thu, 6 Mar 2025 16:13:31 +0500
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8E=20=D1=84=D0=BE=D1=80=D0=BC=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                |  7 +++--
 js/modules/upload-form.js | 63 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 4be99ba..5635f4f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <script src="./vendor/pristine/pristine.min.js" defer></script>
   <script src="./js/functions.js" defer></script>
   <script src="./js/main.js" type="module" defer></script>
 
@@ -119,10 +120,10 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                 <!-- Добавление хэштегов и комментария к изображению -->
                 <fieldset class="img-upload__text text">
                   <div class="img-upload__field-wrapper">
-                    <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег" maxlength="20" data-pristine-pattern="/^#[a-zф-яё0-9]{1,19}$/i">
+                    <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
                   </div>
                   <div class="img-upload__field-wrapper">
-                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
+                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..." maxlength="140"></textarea>
                   </div>
                 </fieldset>
 
@@ -236,7 +237,7 @@ <h2 class="success__title">Изображение успешно загруже
       <h2 class="data-error__title">Не удалось загрузить данные</h2>
     </section>
   </template>
-  <script src="./vendor/pristine/pristine.min.js"></script>
+
 </body>
 
 </html>
diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
index da0364d..2648509 100644
--- a/js/modules/upload-form.js
+++ b/js/modules/upload-form.js
@@ -1,12 +1,23 @@
 import { isEscapeKey } from './util';
 
+const regexp = /^#[a-zф-яё0-9]{1,19}$/i;
+const HASHTAGS_COUNT = 5;
+const COMMENT_LENGTH = 140;
+
 const formUpload = document.querySelector('.img-upload__form');
 const imageUploadInput = formUpload.querySelector('.img-upload__input');
 const imageOverlay = formUpload.querySelector('.img-upload__overlay');
 const imageUploadCancle = formUpload.querySelector('.img-upload__cancel');
 const uploadHashtag = formUpload.querySelector('.text__hashtags');
+const uploadComment = formUpload.querySelector('.text__description');
+
 
-const pristine = new Pristine(formUpload);
+const pristine = new Pristine(formUpload, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextTag: 'div',
+  errorTextClass: 'img-upload__field-wrapper--error'
+});
 
 const onDocumentKeyDown = (evt) => {
   if(isEscapeKey(evt)){
@@ -23,6 +34,7 @@ const openUploadWindow = () => {
 
 function closeUploadWindow() {
   imageUploadInput.value = '';
+  uploadHashtag.value = '';
   imageOverlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeyDown);
@@ -32,12 +44,49 @@ imageUploadInput.addEventListener('change', openUploadWindow);
 
 imageUploadCancle.addEventListener('click', closeUploadWindow);
 
+const getHashtagsArray = (element) => {
+  const hashtagsArray = element.trim().toLowerCase().split(' ');
+  return hashtagsArray;
+};
+
+const getHashtagsName = (element) => {
+  const hashtagsName = getHashtagsArray(element);
+  const newArray = [];
+  hashtagsName.forEach((hashtag) => {
+    if(regexp.test(hashtag) === true) {
+      newArray.push(hashtag);
+    }
+  });
+  return hashtagsName.length === newArray.length;
+};
+
+const getHashtagsCount = (element) => {
+  const hashtagsArray = getHashtagsArray(element);
+  return hashtagsArray.length <= HASHTAGS_COUNT;
+};
+
+const getHashtagsDuplicate = (element) => {
+  const hashtagsArray = getHashtagsArray(element);
+  const newArray = [];
+  for (let i = 0; i < hashtagsArray.length; i++) {
+    if(!newArray.includes(hashtagsArray[i])){
+      newArray.push(hashtagsArray[i]);
+    }
+  }
+  if(newArray.length === hashtagsArray.length) {
+    return newArray;
+  }
+};
+
+const getCommentLength = (element) => element.length < COMMENT_LENGTH;
+
+
+pristine.addValidator(uploadHashtag, getHashtagsName, 'введён невалидный хэштег');
+pristine.addValidator(uploadHashtag, getHashtagsCount, 'превышено количество хэштегов');
+pristine.addValidator(uploadHashtag, getHashtagsDuplicate, 'хэштеги повторяются');
+pristine.addValidator(uploadComment, getCommentLength, 'длина комментария больше 140 символов');
+
 formUpload.addEventListener('submit', (evt) => {
   evt.preventDefault();
-  const isValid = pristine.validate();
-  if(isValid){
-    console.log('valid');
-  } else{
-    console.log('novalid');
-  }
+  pristine.validate();
 });

From bacb8ef43a86545132fddada3a8990f0acc78763 Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Thu, 6 Mar 2025 17:26:47 +0500
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=20=D0=BE=D1=82=D0=BC=D0=B5=D0=BD=D1=83=20esc?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=D0=B5=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20input=20=D0=B8=20textarea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/modules/upload-form.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
index 2648509..6a66859 100644
--- a/js/modules/upload-form.js
+++ b/js/modules/upload-form.js
@@ -26,18 +26,29 @@ const onDocumentKeyDown = (evt) => {
   }
 };
 
+const onCancleKeyDown = (evt) => {
+  if(isEscapeKey(evt)){
+    evt.stopPropagation();
+  }
+};
+
 const openUploadWindow = () => {
   imageOverlay.classList.remove('hidden');
   document.body.classList.add('modal-open');
+  uploadHashtag.addEventListener('keydown', onCancleKeyDown);
+  uploadComment.addEventListener('keydown', onCancleKeyDown);
   document.addEventListener('keydown', onDocumentKeyDown);
 };
 
 function closeUploadWindow() {
   imageUploadInput.value = '';
   uploadHashtag.value = '';
+  uploadComment.value = '';
   imageOverlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeyDown);
+  uploadHashtag.removeEventListener('focus', onCancleKeyDown);
+  uploadComment.removeEventListener('focus', onCancleKeyDown);
 }
 
 imageUploadInput.addEventListener('change', openUploadWindow);
@@ -45,18 +56,20 @@ imageUploadInput.addEventListener('change', openUploadWindow);
 imageUploadCancle.addEventListener('click', closeUploadWindow);
 
 const getHashtagsArray = (element) => {
-  const hashtagsArray = element.trim().toLowerCase().split(' ');
+  const hashtagsArray = element.toLowerCase().split(/\s+/).filter((item) => item !== '');
   return hashtagsArray;
 };
 
 const getHashtagsName = (element) => {
   const hashtagsName = getHashtagsArray(element);
   const newArray = [];
+
   hashtagsName.forEach((hashtag) => {
     if(regexp.test(hashtag) === true) {
       newArray.push(hashtag);
     }
   });
+
   return hashtagsName.length === newArray.length;
 };
 

From 980652b823a62bda0f6fc76bdee7c35741f576b5 Mon Sep 17 00:00:00 2001
From: Nargiza <nargizusya@gmail.com>
Date: Sun, 9 Mar 2025 18:14:28 +0500
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=B2=20=D0=BC=D0=BE=D0=B4=D1=83=D0=BB=D0=B5=20upload-form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/modules/upload-form.js | 54 +++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
index 6a66859..ad2ab44 100644
--- a/js/modules/upload-form.js
+++ b/js/modules/upload-form.js
@@ -1,13 +1,20 @@
 import { isEscapeKey } from './util';
 
-const regexp = /^#[a-zф-яё0-9]{1,19}$/i;
 const HASHTAGS_COUNT = 5;
 const COMMENT_LENGTH = 140;
+const REGEXP = /^#[a-zф-яё0-9]{1,19}$/i;
+
+const errorMessage = {
+  invalidName: 'введён невалидный хэштег',
+  hashtagsLimit: 'превышено количество хэштегов',
+  hashtagsRepeat: 'хэштеги повторяются',
+  commentsLength: 'длина комментария больше 140 символов'
+};
 
 const formUpload = document.querySelector('.img-upload__form');
 const imageUploadInput = formUpload.querySelector('.img-upload__input');
 const imageOverlay = formUpload.querySelector('.img-upload__overlay');
-const imageUploadCancle = formUpload.querySelector('.img-upload__cancel');
+const imageUploadCancel = formUpload.querySelector('.img-upload__cancel');
 const uploadHashtag = formUpload.querySelector('.text__hashtags');
 const uploadComment = formUpload.querySelector('.text__description');
 
@@ -22,7 +29,7 @@ const pristine = new Pristine(formUpload, {
 const onDocumentKeyDown = (evt) => {
   if(isEscapeKey(evt)){
     evt.preventDefault();
-    closeUploadWindow();
+    onCloseUploadWindow();
   }
 };
 
@@ -32,7 +39,7 @@ const onCancleKeyDown = (evt) => {
   }
 };
 
-const openUploadWindow = () => {
+const onOpenUploadWindow = () => {
   imageOverlay.classList.remove('hidden');
   document.body.classList.add('modal-open');
   uploadHashtag.addEventListener('keydown', onCancleKeyDown);
@@ -40,7 +47,7 @@ const openUploadWindow = () => {
   document.addEventListener('keydown', onDocumentKeyDown);
 };
 
-function closeUploadWindow() {
+function onCloseUploadWindow() {
   imageUploadInput.value = '';
   uploadHashtag.value = '';
   uploadComment.value = '';
@@ -51,26 +58,19 @@ function closeUploadWindow() {
   uploadComment.removeEventListener('focus', onCancleKeyDown);
 }
 
-imageUploadInput.addEventListener('change', openUploadWindow);
+imageUploadInput.addEventListener('change', onOpenUploadWindow);
 
-imageUploadCancle.addEventListener('click', closeUploadWindow);
+imageUploadCancel.addEventListener('click', onCloseUploadWindow);
 
 const getHashtagsArray = (element) => {
-  const hashtagsArray = element.toLowerCase().split(/\s+/).filter((item) => item !== '');
+  const hashtagsArray = element.toLowerCase().split(/\s+/).filter(Boolean);
   return hashtagsArray;
 };
 
 const getHashtagsName = (element) => {
   const hashtagsName = getHashtagsArray(element);
-  const newArray = [];
-
-  hashtagsName.forEach((hashtag) => {
-    if(regexp.test(hashtag) === true) {
-      newArray.push(hashtag);
-    }
-  });
 
-  return hashtagsName.length === newArray.length;
+  return hashtagsName.every((hashtag) => REGEXP.test(hashtag));
 };
 
 const getHashtagsCount = (element) => {
@@ -80,26 +80,20 @@ const getHashtagsCount = (element) => {
 
 const getHashtagsDuplicate = (element) => {
   const hashtagsArray = getHashtagsArray(element);
-  const newArray = [];
-  for (let i = 0; i < hashtagsArray.length; i++) {
-    if(!newArray.includes(hashtagsArray[i])){
-      newArray.push(hashtagsArray[i]);
-    }
-  }
-  if(newArray.length === hashtagsArray.length) {
-    return newArray;
-  }
+  return new Set(hashtagsArray).size === hashtagsArray.length;
 };
 
 const getCommentLength = (element) => element.length < COMMENT_LENGTH;
 
 
-pristine.addValidator(uploadHashtag, getHashtagsName, 'введён невалидный хэштег');
-pristine.addValidator(uploadHashtag, getHashtagsCount, 'превышено количество хэштегов');
-pristine.addValidator(uploadHashtag, getHashtagsDuplicate, 'хэштеги повторяются');
-pristine.addValidator(uploadComment, getCommentLength, 'длина комментария больше 140 символов');
+pristine.addValidator(uploadHashtag, getHashtagsName, errorMessage.invalidName);
+pristine.addValidator(uploadHashtag, getHashtagsCount, errorMessage.hashtagsLimit);
+pristine.addValidator(uploadHashtag, getHashtagsDuplicate, errorMessage.hashtagsRepeat);
+pristine.addValidator(uploadComment, getCommentLength, errorMessage.commentsLength);
 
 formUpload.addEventListener('submit', (evt) => {
   evt.preventDefault();
-  pristine.validate();
+  if(pristine.validate()){
+    formUpload.submit();
+  }
 });