From 6aac280f5f7b65f9717a97a1369004d765d95516 Mon Sep 17 00:00:00 2001
From: ClaireFotina
 <clairefotina18.03@gmail.comgit config --global user.email clairefotina18.03@gmail.com>
Date: Mon, 16 Dec 2024 21:12:03 +0400
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B0=D0=B5=D1=82=20=D1=8D?=
 =?UTF-8?q?=D1=84=D1=84=D0=B5=D0=BA=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html       | 77 ++++++++++++++++++++++++++++++------------------
 js/constants.js  |  4 +--
 js/data.js       | 12 ++++----
 js/effects.js    | 12 ++++----
 js/form.js       | 24 +++++++--------
 js/modal.js      | 31 +++++++++----------
 js/scale.js      | 12 ++++----
 js/thumbnails.js | 24 +++++++--------
 js/util.js       | 13 ++++----
 js/validation.js | 34 +++++++++++----------
 10 files changed, 128 insertions(+), 115 deletions(-)
diff --git a/index.html b/index.html
index 74568b2..af52e7a 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -17,7 +18,8 @@
     <section class="img-filters  img-filters--inactive  container">
       <h2 class="img-filters__title  visually-hidden">Фильтр фотографий</h2>
       <form class="img-filters__form" action="index.html" method="get" autocomplete="off">
-        <button type=button class="img-filters__button  img-filters__button--active" id="filter-default">По умолчанию</button>
+        <button type=button class="img-filters__button  img-filters__button--active" id="filter-default">По
+          умолчанию</button>
         <button type=button class="img-filters__button" id="filter-random">Случайные</button>
         <button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
       </form>
@@ -31,7 +33,9 @@ <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" method="post" action="https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data" autocomplete="off" novalidate="true">
+          <form class="img-upload__form" id="upload-select-image" method="post"
+            action="https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data" autocomplete="off"
+            novalidate="true">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -47,7 +51,8 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                   <!-- Изменение размера изображения -->
                   <fieldset class="img-upload__scale  scale">
                     <button type="button" class="scale__control  scale__control--smaller">Уменьшить</button>
-                    <input type="text" class="scale__control  scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
+                    <input type="text" class="scale__control  scale__control--value" value="100%" title="Image Scale"
+                      name="scale" readonly>
                     <button type="button" class="scale__control  scale__control--bigger">Увеличить</button>
                   </fieldset>
 
@@ -70,42 +75,48 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                 <fieldset class="img-upload__effects  effects">
                   <ul class="effects__list">
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-none" value="none" checked>
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-none"
+                        value="none" checked>
                       <label for="effect-none" class="effects__label">
                         <span class="effects__preview  effects__preview--none">Превью фото без эффекта</span>
                         Оригинал
                       </label>
                     </li>
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-chrome" value="chrome">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-chrome"
+                        value="chrome">
                       <label for="effect-chrome" class="effects__label">
                         <span class="effects__preview  effects__preview--chrome">Превью эффекта Хром</span>
                         Хром
                       </label>
                     </li>
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-sepia" value="sepia">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-sepia"
+                        value="sepia">
                       <label for="effect-sepia" class="effects__label">
                         <span class="effects__preview  effects__preview--sepia">Превью эффекта Сепия</span>
                         Сепия
                       </label>
                     </li>
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-marvin" value="marvin">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-marvin"
+                        value="marvin">
                       <label for="effect-marvin" class="effects__label">
                         <span class="effects__preview  effects__preview--marvin">Превью эффекта Марвин</span>
                         Марвин
                       </label>
                     </li>
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-phobos" value="phobos">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-phobos"
+                        value="phobos">
                       <label for="effect-phobos" class="effects__label">
                         <span class="effects__preview  effects__preview--phobos">Превью эффекта Фобос</span>
                         Фобос
                       </label>
                     </li>
                     <li class="effects__item">
-                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-heat" value="heat">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-heat"
+                        value="heat">
                       <label for="effect-heat" class="effects__label">
                         <span class="effects__preview  effects__preview--heat">Превью эффекта Зной</span>
                         Зной
@@ -155,15 +166,18 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
           </div>
 
           <!-- Комментарии к изображению -->
-          <div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
+          <div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span
+              class="social__comment-total-count">125</span> комментариев</div>
           <ul class="social__comments">
             <li class="social__comment">
-              <img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
+              <img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35"
+                height="35">
               <p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
             </li>
             <li class="social__comment">
-              <img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
-               <p class="social__text">Да это фоташоп!!!!!!!!</p>
+              <img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35"
+                height="35">
+              <p class="social__text">Да это фоташоп!!!!!!!!</p>
             </li>
           </ul>
 
@@ -172,7 +186,8 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
 
           <!-- Форма для отправки комментария -->
           <div class="social__footer">
-            <img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
+            <img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35"
+              height="35">
             <input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
             <button type="button" class="social__footer-btn" name="button">Отправить</button>
           </div>
@@ -187,11 +202,14 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
   <footer class="page-footer  container">
     <div class="page-footer__wrapper">
       <div class="page-footer__copyright  copyright">
-        <a class="copyright__link  copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
-        <p>Сделано в <a class="copyright__link  copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
+        <a class="copyright__link  copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img
+            src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
+        <p>Сделано в <a class="copyright__link  copyright__link--text"
+            href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
       </div>
       <ul class="page-footer__contacts  contacts">
-        <li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link  contacts__link--twitter">Twitter</a></li>
+        <li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link  contacts__link--twitter">Twitter</a>
+        </li>
         <li><a href="https://vk.com/htmlacademy" class="contacts__link  contacts__link--vk">VK</a></li>
       </ul>
     </div>
@@ -228,16 +246,17 @@ <h2 class="success__title">Изображение успешно загруже
     </section>
   </template>
 
-    <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
-    <template id="data-error">
-      <section class="data-error">
-        <h2 class="data-error__title">Не удалось загрузить данные</h2>
-      </section>
-    </template>
-    <script type="module" src="./js/main.js">
-    </script>
-    <script src="./vendor/pristine/pristine.min.js">
-          </script>
-          <script src="./vendor/nouislider/nouislider.js"></script>
+  <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
+  <template id="data-error">
+    <section class="data-error">
+      <h2 class="data-error__title">Не удалось загрузить данные</h2>
+    </section>
+  </template>
+  <script type="module" src="./js/main.js">
+  </script>
+  <script src="./vendor/pristine/pristine.min.js">
+  </script>
+  <script src="./vendor/nouislider/nouislider.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/js/constants.js b/js/constants.js
index 68cdc0c..f077393 100644
--- a/js/constants.js
+++ b/js/constants.js
@@ -14,13 +14,13 @@ const EFFECTS_STYLES = {
     INVERT: 'invert',
     BLUR: 'blur',
     BRIGHTNESS: 'brightness'
-}
+};
 
 const UNITS = {
     PX: 'px',
     NONE: '',
     PS: '%'
-}
+};
 
 export const EffectsSetting = {
     [EFFECTS.NONE]: {
diff --git a/js/data.js b/js/data.js
index 34d3200..013649e 100644
--- a/js/data.js
+++ b/js/data.js
@@ -1,4 +1,4 @@
-import {getRandomInteger} from './util.js'
+import { getRandomInteger } from './util.js';
 
 const COUNT_PHOTO = 25;
 const MIN_LIKES = 15;
@@ -50,8 +50,8 @@ const getComments = () => {
     }
     )
   }
-  return comments
-}
+  return comments;
+};
 
 
 const getPhoto = (i) => {
@@ -62,7 +62,7 @@ const getPhoto = (i) => {
     likes: getRandomInteger(MIN_LIKES, MAX_LIKES),
     comments: getComments()
   }
-}
+};
 
 const getData = () => {
   const data = [];
@@ -71,6 +71,6 @@ const getData = () => {
   }
 
   return data;
-}
+};
 
-export {getData};
\ No newline at end of file
+export { getData };
\ No newline at end of file
diff --git a/js/effects.js b/js/effects.js
index c7e13fe..44df0e8 100644
--- a/js/effects.js
+++ b/js/effects.js
@@ -16,12 +16,12 @@ noUiSlider.create(sliderContainer, {
   start: 80,
   step: 1,
   connect: 'lower',
-})
+});
 
 const render = () => {
   const { style, units } = EffectsSetting[currentEffect];
   imageUploadPreview.style.filter = `${style}(${value.value}${units})`;
-}
+};
 
 const updateSlider = () => {
   const { min, max, step } = EffectsSetting[currentEffect];
@@ -34,17 +34,17 @@ const updateSlider = () => {
     start: max,
   }
   )
-}
+};
 
 sliderContainer.noUiSlider.on('update', () => {
   value.value = sliderContainer.noUiSlider.get();
   render();
-})
+});
 
 export const reset = () => {
   imageUploadPreview.style.filter = '';
   sliderBlock.classList.add('hidden');
-}
+};
 
 effectsList.addEventListener('change', ({ target }) => {
   currentEffect = target.value;
@@ -54,6 +54,6 @@ effectsList.addEventListener('change', ({ target }) => {
     updateSlider();
     sliderBlock.classList.remove('hidden');
   }
-})
+});
 
 reset()
\ No newline at end of file
diff --git a/js/form.js b/js/form.js
index f17d48d..baeb2bd 100644
--- a/js/form.js
+++ b/js/form.js
@@ -1,6 +1,6 @@
 import { isValid, reset as resetValidation } from './validation.js';
-import { reset as resetScale} from './scale.js';
-import {reset as resetEffects} from './effects.js';
+import { reset as resetScale } from './scale.js';
+import { reset as resetEffects } from './effects.js';
 
 const uploadForm = document.querySelector('.img-upload__form');
 const uploadFileInput = uploadForm.querySelector('.img-upload__input');
@@ -11,11 +11,11 @@ const body = document.body;
 const openForm = () => {
   uploadOverlay.classList.remove('hidden');
   body.classList.add('modal-open');
-}
+};
 
 uploadFileInput.addEventListener('change', () => {
-  openForm()
-})
+  openForm();
+});
 
 const closeForm = () => {
   uploadOverlay.classList.add('hidden');
@@ -24,24 +24,24 @@ const closeForm = () => {
   resetValidation();
   resetScale();
   resetEffects();
-}
+};
 
 uploadCancelInput.addEventListener('click', (evt) => {
   evt.preventDefault();
-  closeForm()
-})
+  closeForm();
+});
 
 document.addEventListener('keydown', (evt) => {
   if (evt.key === "Escape") {
-    evt.preventDefault()
-    closeForm()
+    evt.preventDefault();
+    closeForm();
   }
-})
+});
 
 const onFormSubmit = (evt) => {
   if (!isValid()) {
     evt.preventDefault();
   }
-}
+};
 
 uploadForm.addEventListener('submit', onFormSubmit);
\ No newline at end of file
diff --git a/js/modal.js b/js/modal.js
index 8536c04..a771a5e 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -18,35 +18,33 @@ let renderedCommrntsCount = 0;
 const show = () => {
   modalElement.classList.remove('hidden');
   body.classList.add('modal-open');
-}
+};
 
 const hide = () => {
   modalElement.classList.add('hidden');
   body.classList.remove('modal-open');
-}
+};
 
 const createComment = (comment) => {
   const newComment = commentElement.cloneNode(true);
-
   const avatarElement = newComment.querySelector('.social__picture');
   avatarElement.src = comment.avatar;
   avatarElement.alt = comment.name;
   newComment.querySelector('.social__text').textContent = comment.message;
-
-  return newComment
-}
+  return newComment;
+};
 
 const renderStatistic = () => {
   renderedCommrntsCountElement.textContent = renderedCommrntsCount;
-}
+};
 
 const renderLoader = () => {
   if (localComments.length) {
-    loaderElement.classList.remove('hidden')
+    loaderElement.classList.remove('hidden');
   } else {
-    loaderElement.classList.add('hidden')
+    loaderElement.classList.add('hidden');
   }
-}
+};
 
 const renderComments = () => {
   const fragment = document.createDocumentFragment();
@@ -55,14 +53,13 @@ const renderComments = () => {
     renderedCommrntsCount++;
   })
   commentsContainerElement.append(fragment);
-
   renderStatistic();
   renderLoader();
-}
+};
 
 loaderElement.addEventListener('click', () => {
   renderComments();
-})
+});
 
 const render = ({ url, description, likes, comments }) => {
   imageElement.src = url;
@@ -71,16 +68,16 @@ const render = ({ url, description, likes, comments }) => {
   totalCommentsElement.textContent = comments.length;
   localComments = [...comments];
   renderedCommrntsCount = 0;
-  renderComments()
-}
+  renderComments();
+};
 
 export const open = (data) => {
   commentsContainerElement.innerHTML = ' ';
   render(data);
   show();
-}
+};
 
 buttonCloseElement.addEventListener('click', (evt) => {
   evt.preventDefault();
   hide();
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/js/scale.js b/js/scale.js
index f787a72..e69e9f5 100644
--- a/js/scale.js
+++ b/js/scale.js
@@ -14,24 +14,24 @@ let currentScale = SCALE_VALUE_DEFAULT;
 const render = () => {
   scaleValue.value = `${currentScale}%`;
   imageUploadPreview.style.transform = `scale(${currentScale * FACTOR})`;
-}
+};
 
 const onScalleSmallerClick = () => {
   currentScale = currentScale > SCALE_VALUE_MIN ? currentScale - SCALE_VALUE_STEP : SCALE_VALUE_MIN;
-  render()
-}
+  render();
+};
 
 const onScalleBiggerClick = () => {
   currentScale = currentScale < SCALE_VALUE_MAX ? currentScale + SCALE_VALUE_STEP : SCALE_VALUE_MAX;
-  render()
-}
+  render();
+};
 
 scalleSmaller.addEventListener('click', onScalleSmallerClick);
 scalleBigger.addEventListener('click', onScalleBiggerClick);
 
 export const reset = () => {
   currentScale = SCALE_VALUE_DEFAULT;
-  render()
+  render();
 }
 
 reset();
\ No newline at end of file
diff --git a/js/thumbnails.js b/js/thumbnails.js
index de4fbce..4de9976 100644
--- a/js/thumbnails.js
+++ b/js/thumbnails.js
@@ -7,9 +7,7 @@ let localData;
 
 export const renderThumbnails = (photos) => {
   localData = [...photos];
-
   const fragment = document.createDocumentFragment();
-
   photos.forEach((photo) => {
     const thumbnail = template.cloneNode(true);
     const image = thumbnail.querySelector('.picture__img');
@@ -17,22 +15,20 @@ export const renderThumbnails = (photos) => {
     image.alt = photo.description;
     thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
     thumbnail.querySelector('.picture__likes').textContent = photo.likes;
-
     thumbnail.dataset.id = photo.id;
-  
     fragment.append(thumbnail);
   })
   containerElement.append(fragment);
-}
-
-containerElement.addEventListener('click', ({target}) => {
- const card = target.closest('.picture');
- if(card) {
-  const id = Number(card.dataset.id);
-  const photo = localData.find((item) => item.id === id);
-  openModal(photo);
- }
-})
+};
+
+containerElement.addEventListener('click', ({ target }) => {
+  const card = target.closest('.picture');
+  if (card) {
+    const id = Number(card.dataset.id);
+    const photo = localData.find((item) => item.id === id);
+    openModal(photo);
+  }
+});
 
 
 
diff --git a/js/util.js b/js/util.js
index 11521e0..bea8bdf 100644
--- a/js/util.js
+++ b/js/util.js
@@ -1,9 +1,8 @@
 const getRandomInteger = (min, max) => {
-    const lower = Math.ceil(Math.min(Math.abs(min), Math.abs(max)));
-    const upper = Math.floor(Math.max(Math.abs(min), Math.abs(max)));
-    const result = Math.random() * (upper - lower + 1) + lower;
-  
-    return Math.floor(result)
-  }
+  const lower = Math.ceil(Math.min(Math.abs(min), Math.abs(max)));
+  const upper = Math.floor(Math.max(Math.abs(min), Math.abs(max)));
+  const result = Math.random() * (upper - lower + 1) + lower;
+  return Math.floor(result);
+};
 
-  export {getRandomInteger};
\ No newline at end of file
+export { getRandomInteger };
\ No newline at end of file
diff --git a/js/validation.js b/js/validation.js
index 911b9ba..9396d54 100644
--- a/js/validation.js
+++ b/js/validation.js
@@ -12,7 +12,7 @@ const pristine = new Pristine(uploadForm, {
     classTo: 'img-upload__field-wrapper',
     errorClass: 'img-upload__field-wrapper--error',
     errorTextParent: 'img-upload__field-wrapper'
-})
+});
 
 const createHashtags = (value) => value
     .toLowerCase()
@@ -23,51 +23,53 @@ const createHashtags = (value) => value
 
 const checkDescription = (value) => value.length <= MAX_SYMBOL;
 const checkHashtags = (value) => {
-    if(!value.length) {
-       return true;
+    if (!value.length) {
+        return true;
     }
     const hashTags = createHashtags(value);
-    return hashTags.every((hashtag) => HASHTAG_FORMULA.test(hashtag))
+    return hashTags.every((hashtag) => HASHTAG_FORMULA.test(hashtag));
 };
+
 const checkHashtagsCount = (value) => {
-    if(!value.length) {
+    if (!value.length) {
         return true;
-     }
+    }
     const hashTags = createHashtags(value);
     return hashTags.length <= MAX_HASHTAGS;
 };
+
 const checkUniqueHashtags = (value) => {
-    if(!value.length) {
+    if (!value.length) {
         return true;
-     }
-     const hashTags = createHashtags(value);
-     const uniques = [...new Set(hashTags)];
-     return hashTags.length === uniques.length;
-}
+    }
+    const hashTags = createHashtags(value);
+    const uniques = [...new Set(hashTags)];
+    return hashTags.length === uniques.length;
+};
 
 pristine.addValidator(
     inputHashtags,
     checkHashtags,
     'Хэштэг содержит неверные символы'
-)
+);
 
 pristine.addValidator(
     inputHashtags,
     checkHashtagsCount,
     `Количество хэштэгов не должно превышать ${MAX_HASHTAGS}`
-)
+);
 
 pristine.addValidator(
     inputHashtags,
     checkUniqueHashtags,
     'Хэштэги не должны повторяться'
-)
+);
 
 pristine.addValidator(
     inputComment,
     checkDescription,
     `Максимальная длина - ${MAX_SYMBOL} символов`
-)
+);
 
 export const isValid = () => pristine.validate();
 export const reset = () => pristine.reset();
\ No newline at end of file
