Дополнительные правки в проект

index.html

@@ -37,7 +37,8 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" accept="image/png, image/jpeg"
+                name="filename" required>
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 

js/filters.js

@@ -6,6 +6,8 @@ const imgFilters = document.querySelector('.img-filters');
 const filterDefault = imgFilters.querySelector('#filter-default');
 const filterRandom = imgFilters.querySelector('#filter-random');
 const filterDiscussed = imgFilters.querySelector('#filter-discussed');
+const filters = [filterDefault, filterRandom, filterDiscussed];
+const DEBOUNCE_DELAY = 500;
 
 let usersPictures = null;
 
@@ -35,8 +37,6 @@ getData().then((data) => {
   }, 5000);
 });
 
-const filters = [filterDefault, filterRandom, filterDiscussed];
-
 const setActiveFilter = (activeFilter) => {
   filters.forEach((filter) => {
     filter.classList.remove('img-filters__button--active');
@@ -48,16 +48,16 @@ filterDefault.addEventListener('click', debounce(() => {
   clearUsersPictures();
   renderUsersPictures(usersPictures);
   setActiveFilter(filterDefault);
-}, 500));
+}, DEBOUNCE_DELAY));
 
 filterRandom.addEventListener('click', debounce(() => {
   clearUsersPictures();
   renderUsersPictures(getRandomPictures(usersPictures));
   setActiveFilter(filterRandom);
-}, 500));
+}, DEBOUNCE_DELAY));
 
 filterDiscussed.addEventListener('click', debounce(() => {
   clearUsersPictures();
   renderUsersPictures(getDiscussedPictures(usersPictures));
   setActiveFilter(filterDiscussed);
-}, 500));
+}, DEBOUNCE_DELAY));

js/fullSize.js

@@ -1,5 +1,6 @@
 import { isEscapeKey, isEnterKey } from './util.js';
 
+const COMMENTS_LOAD_STEP = 5;
 const userBigPicture = document.querySelector('.big-picture');
 const userBigPictureCancel = document.querySelector('.big-picture__cancel');
 const likesCounter = userBigPicture.querySelector('.likes-count');
@@ -12,7 +13,6 @@ const commentsLoader = userBigPicture.querySelector('.comments-loader');
 const socialComments = userBigPicture.querySelector('.social__comments');
 let currentOpenPhoto = null;
 let currentCommentsCount = 0;
-const COMMENTS_LOAD_STEP = 5;
 
 const onUserBigPictureKeydown = (evt) => {
   if (isEscapeKey(evt)) {

js/functions.js

@@ -6,7 +6,7 @@ checkStringLength('проверяемая строка', 10);
 
 
 const checkPhrase = (palindromeString) => {
-  palindromeString = palindromeString.replaceAll(' ' , '').toLowerCase();
+  palindromeString = palindromeString.replaceAll(' ', '').toLowerCase();
 
   let checkPalindrome = '';
 

js/slider.js

@@ -53,8 +53,8 @@ if (slider) {
       effectLevelSlider.classList.add('hidden');
     } else {
       effectLevelSlider.classList.remove('hidden');
-      slider.noUiSlider.set(100);
     }
+    slider.noUiSlider.set(100);
   });
 
   window.addEventListener('load', () => {

js/thumbnails.js

@@ -4,7 +4,6 @@ const templateUserPicture = document.querySelector('#picture')
   .content
   .querySelector('.picture');
 
-
 const containerUsersPictures = document.querySelector('.pictures');
 
 const renderUsersPictures = (pictures) => {

js/uploadForm.js

@@ -1,5 +1,14 @@
 import { sendData } from './api.js';
 
+const SCALE_MAX = 100;
+const SCALE_MIN = 10;
+const SCALE_STEP = 25;
+const MAX_HASHTAGS = 5;
+const MAX_HASHTAG_LENGTH = 20;
+const MAX_COMMENT_LENGTH = 140;
+
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+
 const imgUploadForm = document.querySelector('.img-upload__form');
 const inputFile = document.querySelector('.img-upload__input');
 const formOverlay = document.querySelector('.img-upload__overlay');
@@ -28,25 +37,27 @@ const pristine = new Pristine(imgUploadForm, {
   errorTextClass: 'img-upload__field-wrapper--error'
 });
 
-inputFile.addEventListener('change', () => {
-  formOverlay.classList.remove('hidden');
-  document.body.classList.add('modal-open');
-});
+const onEscKeyDown = (evt) => {
+  if (evt.key === 'Escape' && !evt.target.closest('.text__hashtags')) {
+    formOverlay.classList.add('hidden');
+    document.body.classList.remove('modal-open');
+  }
+};
 
-function resetFormHandler() {
+const resetFormHandler = () => {
   formOverlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.addEventListener('keydown', onEscKeyDown);
   imgPreview.style.transform = 'scale(1)';
-  slider.noUiSlider.set(100);
+  slider.noUiSlider.set(SCALE_MAX);
   imgPreview.style.filter = 'none';
   effect.classList.add('hidden');
-  scale.value = `${100}%`;
+  scale.value = `${SCALE_MAX}%`;
   imgPreview.style.transform = '';
   effect.classList.add('hidden');
   inputFile.value = '';
   imgUploadForm.reset();
-}
+};
 
 cancelButton.addEventListener('click', () => {
   formOverlay.classList.add('hidden');
@@ -55,20 +66,20 @@ cancelButton.addEventListener('click', () => {
 });
 
 scaleControlSmaller.addEventListener('click', () => {
-  let scaleValue = parseInt(scaleControlValue.value, 10);
-  if (scaleValue > 25) {
-    scaleValue -= 25;
+  let scaleValue = parseInt(scaleControlValue.value, SCALE_MIN);
+  if (scaleValue > SCALE_STEP) {
+    scaleValue -= SCALE_STEP;
     scaleControlValue.value = `${scaleValue} %`;
-    imgPreview.style.transform = `scale(${scaleValue / 100})`;
+    imgPreview.style.transform = `scale(${scaleValue / SCALE_MAX})`;
   }
 });
 
 scaleControlBigger.addEventListener('click', () => {
-  let scaleValue = parseInt(scaleControlValue.value, 10);
-  if (scaleValue < 100) {
-    scaleValue += 25;
+  let scaleValue = parseInt(scaleControlValue.value, SCALE_MIN);
+  if (scaleValue < SCALE_MAX) {
+    scaleValue += SCALE_STEP;
     scaleControlValue.value = `${scaleValue} %`;
-    imgPreview.style.transform = `scale(${scaleValue / 100})`;
+    imgPreview.style.transform = `scale(${scaleValue / SCALE_MAX})`;
   }
 });
 
@@ -80,7 +91,7 @@ pristine.addValidator(hashtagInput, (value) => {
 
   const hashtags = value.split(' ');
 
-  if (hashtags.length > 5) {
+  if (hashtags.length > MAX_HASHTAGS) {
     hashtagErrorMessage = 'Слишком много хэштегов. Максимум 5.';
     return false;
   }
@@ -102,7 +113,8 @@ pristine.addValidator(hashtagInput, (value) => {
       hashtagErrorMessage = 'Хэштег должен начинаться с символа #.';
       return false;
     }
-    if (hashtag.length > 20) {
+
+    if (hashtag.length > MAX_HASHTAG_LENGTH) {
       hashtagErrorMessage = 'Хэштег не может быть длиннее 20 символов.';
       return false;
     }
@@ -115,6 +127,7 @@ pristine.addValidator(hashtagInput, (value) => {
   return true;
 }, () => hashtagErrorMessage, 2);
 
+
 hashtagInput.addEventListener('focus', () => {
   document.removeEventListener('keydown', onEscKeyDown);
 });
@@ -123,20 +136,15 @@ hashtagInput.addEventListener('blur', () => {
   document.addEventListener('keydown', onEscKeyDown);
 });
 
-function onEscKeyDown(evt) {
-  if (evt.key === 'Escape' && !evt.target.closest('.text__hashtags')) {
-    formOverlay.classList.add('hidden');
-    document.body.classList.remove('modal-open');
-  }
-}
 
 document.addEventListener('keydown', onEscKeyDown);
 
 pristine.addValidator(commentInput, (value) => {
   if (value === '') {
     return true;
   }
-  return value.length <= 140;
+
+  return value.length <= MAX_COMMENT_LENGTH;
 }, 'Комментарий не может быть длиннее 140 символов.', 2);
 
 commentInput.addEventListener('keydown', (evt) => {
@@ -145,27 +153,25 @@ commentInput.addEventListener('keydown', (evt) => {
   }
 });
 
-function isEscapeKey(evt) {
-  return evt.key === 'Escape';
-}
+const isEscapeKey = (evt) => evt.key === 'Escape';
 
-function onCloseMessage(message, escKeydownHandler, clickHandler) {
+const onCloseMessage = (message, escKeydownHandler, clickHandler) => {
   message.remove();
   document.removeEventListener('keydown', escKeydownHandler);
   message.removeEventListener('click', clickHandler);
-}
+};
 
-function onMessageEscKeydown(evt, closeHandler) {
+const onMessageEscKeydown = (evt, closeHandler) => {
   if (isEscapeKey(evt)) {
     closeHandler();
   }
-}
+};
 
-function onMessageClick(evt, closeHandler) {
+const onMessageClick = (evt, closeHandler) => {
   if (!evt.target.closest('.success__inner') || evt.target.closest('.success__button')) {
     closeHandler();
   }
-}
+};
 
 imgUploadForm.addEventListener('submit', (evt) => {
   const isValid = pristine.validate();
@@ -185,7 +191,6 @@ imgUploadForm.addEventListener('submit', (evt) => {
       resetFormHandler();
     })
 
-
     .catch(() => {
       document.body.appendChild(errorMessage);
       document.addEventListener('keydown', (evtKeydown) => onMessageEscKeydown(evtKeydown, () => onCloseMessage(errorMessage, onMessageEscKeydown, onMessageClick)));
@@ -210,22 +215,26 @@ imgUploadForm.addEventListener('submit', (evt) => {
     });
 });
 
-inputFile.addEventListener('change', function () {
-  const file = this.files[0];
+inputFile.addEventListener('change', () => {
+  formOverlay.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  const file = inputFile.files[0];
+  const fileName = file.name.toLowerCase();
   const reader = new FileReader();
 
   reader.onloadend = function () {
     imgPreview.src = reader.result;
   };
 
-  if (file) {
+  if (file && FILE_TYPES.some((it) => fileName.endsWith(it))) {
     reader.readAsDataURL(file);
+    submitButton.disabled = false;
   } else {
     imgPreview.src = '';
+    submitButton.disabled = true;
   }
 });
 
-
 const errorMessageElement = document.createElement('div');
 errorMessageElement.classList.add('error-message');
 errorMessageElement.textContent = 'Произошла ошибка при загрузке фотографии. Пожалуйста, попробуйте еще раз.';