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

index.html

@@ -40,7 +40,7 @@ <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" name="filename" accept="image/jpeg, image/png, image/jpg" required>
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 

js/filter.js

@@ -1,7 +1,8 @@
 import {container, photosData, loadAndRenderPhotos, renderPhotos} from './picture-from-api.js';
 import {getUniqueRandom} from './utils.js';
+import {debounce} from './main.js';
 
-let filterContainer = document.querySelector('.img-filters');
+const filterContainer = document.querySelector('.img-filters');
 filterContainer.classList.remove('img-filters--inactive');
 
 
@@ -11,50 +12,56 @@ const buttonDiscussed = document.querySelector('#filter-discussed');
 
 const buttons = document.querySelectorAll('.img-filters__button');
 
-buttons.forEach(button => {
+buttons.forEach((button) => {
   button.addEventListener('click', function() {
-    buttons.forEach(btn => btn.classList.remove('img-filters__button--active'));
+    buttons.forEach((btn) => btn.classList.remove('img-filters__button--active'));
 
     this.classList.add('img-filters__button--active');
   });
 });
 
 function clearAll() {
   const photoElements = container.querySelectorAll('.picture');
-  photoElements.forEach(element => element.remove());
+  photoElements.forEach((element) => element.remove());
 }
 
 function showDefault() {
   clearAll();
   loadAndRenderPhotos().catch((error) => {
-    console.error('Ошибка при загрузке фото:', error)
+    throw new Error(error);
   });
 }
 
 function showRandom() {
   clearAll();
-  let randomSet = new Set();
+  const randomSet = new Set();
 
-  for (let i = 0; i <10; i++) {
+  for (let i = 0; i < 10; i++) {
 
-    let number = getUniqueRandom(randomSet, 0, 24, 'Не могу придумать новое число');
+    const number = getUniqueRandom(randomSet, 0, 24, 'Не могу придумать новое число');
     const picture = photosData[number];
     renderPhotos(picture);
-    }
+    randomSet.add(number);
   }
+}
 
 function showDiscussed() {
   clearAll();
   const descendingCommentsPhotos = photosData.sort((a, b) =>
-    b.comments.length - a.comments.length);
-
+    b.comments.length - a.comments.length
+  );
   descendingCommentsPhotos.forEach((picture) => {
     renderPhotos(picture);
   });
 }
 
-buttonDefault.addEventListener('click', showDefault);
-buttonRandom.addEventListener('click', showRandom);
-buttonDiscussed.addEventListener('click', showDiscussed);
+
+const debouncedShowDefault = debounce(showDefault);
+const debouncedShowRandom = debounce(showRandom);
+const debouncedShowDiscussed = debounce(showDiscussed);
+
+buttonDefault.addEventListener('click', debouncedShowDefault);
+buttonRandom.addEventListener('click', debouncedShowRandom);
+buttonDiscussed.addEventListener('click', debouncedShowDiscussed);
 
 

js/form.js

@@ -13,6 +13,8 @@ const commentField = document.querySelector('.text__description');
 
 const submitButtonText = submitButton.textContent;
 
+const successModal = sendTemplate.content.cloneNode(true).querySelector('.success');
+
 function blockSubmitButton() {
   submitButton.disabled = true;
   submitButton.textContent = 'Публикую...';
@@ -22,14 +24,18 @@ function unblockSubmitButton() {
   submitButton.disabled = false;
   submitButton.textContent = submitButtonText;
 }
-
+function closeSuccessModal() {
+  // const successModal = sendTemplate.content.cloneNode(true).querySelector('.success');
+  successModal.remove();
+  changeEventListeners('remove');
+}
 function handleEscapeKey(evt) {
   if (evt.key === 'Escape') {
     const excludedFields = [hashtagField, commentField];
     const activeElement = document.activeElement;
 
     let shouldClose = true;
-    excludedFields.forEach(field => {
+    excludedFields.forEach((field) => {
       if (field === activeElement) {
         shouldClose = false;
       }
@@ -60,6 +66,12 @@ function changeEventListeners(action) {
   document[method]('click', onOutsideClick);
 }
 
+const pristine = new Pristine (form, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+}, false);
+
 function resetForm() {
   form.reset();
   pristine.reset();
@@ -87,11 +99,6 @@ function closeForm() {
   resetForm();
 }
 
-const pristine = new Pristine(form, {
-  classTo: 'img-upload__field-wrapper',
-  errorTextParent: 'img-upload__field-wrapper',
-  errorTextClass: 'img-upload__field-wrapper--error',
-}, false);
 
 formOpener.addEventListener('click', () => {
   switchForm('remove', 'add');
@@ -123,7 +130,7 @@ function validateHashRepeat(value) {
     return true;
   }
   const hashtags = value.split(' ');
-  const hashtagsLowerCase = hashtags.map(str => str.toLowerCase());
+  const hashtagsLowerCase = hashtags.map((str) => str.toLowerCase());
   for (let i = 0; i < hashtagsLowerCase.length; i++) {
     for (let j = i + 1; j < hashtagsLowerCase.length; j++) {
       if (hashtagsLowerCase[i] === hashtagsLowerCase[j]) {
@@ -156,16 +163,10 @@ pristine.addValidator(
 );
 
 function showSuccessMessage() {
-  const successModal = sendTemplate.content.cloneNode(true).querySelector('.success');
   const successButton = successModal.querySelector('.success__button');
 
   document.body.appendChild(successModal);
 
-  function closeSuccessModal() {
-    successModal.remove();
-    changeEventListeners('remove');
-  }
-
   successButton.addEventListener('click', closeSuccessModal);
   changeEventListeners('add');
 }
@@ -211,7 +212,6 @@ form.addEventListener('submit', async (evt) => {
     showSuccessMessage();
 
   } catch (error) {
-    console.error('Ошибка отправки формы:', error);
     showErrorMessage();
 
   } finally {

js/main.js

@@ -3,3 +3,13 @@ import './slider.js';
 import './api.js';
 import './filter.js';
 import './picture-from-api.js';
+import './photo-preview.js';
+
+export function debounce (callback, timeoutDelay = 500) {
+  let timeoutId;
+
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+}

js/photo-preview.js

@@ -0,0 +1,12 @@
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+const fileChooser = document.querySelector('.img-upload__input');
+const preview = document.querySelector('.img-upload__preview img');
+
+fileChooser.addEventListener('change', () => {
+  const file = fileChooser.files[0];
+  const fileName = file.name.toLowerCase();
+
+  if (FILE_TYPES.some((it) => fileName.endsWith(it))) {
+    preview.src = URL.createObjectURL(file);
+  }
+});

js/picture-from-api.js

@@ -19,7 +19,7 @@ function changeEventListeners(action) {
 export function renderPhotos(picture) {
   const template = photoTemplate.cloneNode(true);
   const image = template.querySelector('.picture__img');
-  let fragment = document.createDocumentFragment();
+  const fragment = document.createDocumentFragment();
 
   template.photoData = picture;
   image.alt = picture.description;

js/slider.js

@@ -3,8 +3,8 @@ const scaleMinus = document.querySelector('.scale__control--smaller');
 const scaleValue = document.querySelector('.scale__control--value');
 const imageToScale = document.querySelector('.img-upload__preview');
 
-let sliderContainer = document.querySelector('.img-upload__effect-level');
-let sliderElement = document.querySelector('.effect-level__slider');
+const sliderContainer = document.querySelector('.img-upload__effect-level');
+const sliderElement = document.querySelector('.effect-level__slider');
 const effectNone = document.querySelector('#effect-none');
 const effectChrome = document.querySelector('#effect-chrome');
 const effectSepia = document.querySelector('#effect-sepia');
@@ -16,9 +16,10 @@ const formOpener = document.querySelector('.img-upload__start');
 
 noUiSlider.create(sliderElement,
   { range: { min: 0, max: 1, }, start: 0, step: 0.1,
-  connect: 'lower',}
+    connect: 'lower',}
 );
 
+
 formOpener.addEventListener('click', () => {
   imageToScale.style.filter = '';
   showSlider ('add');
@@ -46,7 +47,7 @@ effectChrome.addEventListener('change', (evt) => {
     );
 
     sliderElement.noUiSlider.on('update', () => {
-      imageToScale.style.filter = 'grayscale(' + sliderElement.noUiSlider.get() + ')';
+      imageToScale.style.filter = `grayscale(${sliderElement.noUiSlider.get()})`;
     });
   }
 });
@@ -59,7 +60,7 @@ effectSepia.addEventListener('change', (evt) => {
     );
 
     sliderElement.noUiSlider.on('update', () => {
-      imageToScale.style.filter = 'sepia(' + sliderElement.noUiSlider.get() + ')';
+      imageToScale.style.filter = `sepia(${sliderElement.noUiSlider.get()})`;
     });
   }
 });
@@ -72,7 +73,7 @@ effectMarvin.addEventListener('change', (evt) => {
     );
 
     sliderElement.noUiSlider.on('update', () => {
-      imageToScale.style.filter = 'invert(' + sliderElement.noUiSlider.get() + '%)';
+      imageToScale.style.filter = `invert(${sliderElement.noUiSlider.get()}%)`;
     });
   }
 });
@@ -85,7 +86,7 @@ effectPhobos.addEventListener('change', (evt) => {
     );
 
     sliderElement.noUiSlider.on('update', () => {
-      imageToScale.style.filter = 'blur(' + sliderElement.noUiSlider.get() + 'px)';
+      imageToScale.style.filter = `blur(${sliderElement.noUiSlider.get()}px)`;
     });
   }
 });
@@ -98,31 +99,31 @@ effectHeat.addEventListener('change', (evt) => {
     );
 
     sliderElement.noUiSlider.on('update', () => {
-      imageToScale.style.filter = 'brightness(' + sliderElement.noUiSlider.get() + ')';
+      imageToScale.style.filter = `brightness(${sliderElement.noUiSlider.get()})`;
     });
   }
 });
 
 scaleMinus.addEventListener('click', () => {
-  let scale = parseInt(scaleValue.value);
+  let scale = parseInt(scaleValue.value, 10);
   let scalePercent;
 
-  if (scale <= 100 && scale > 0 ) {
+  if(scale <= 100 && scale > 0) {
     scale -= 25;
     scalePercent = scale / 100;
-    scaleValue.value = scale + '%';
-    imageToScale.style.transform = 'scale(' + scalePercent + ')';
+    scaleValue.value = `${scale}%`;
+    imageToScale.style.transform = `scale(${scalePercent})`;
   }
 });
 scalePlus.addEventListener('click', () => {
-  let scale = parseInt(scaleValue.value);
+  let scale = parseInt(scaleValue.value, 10);
   let scalePercent;
 
-  if (scale < 100  && scale >= 0 ) {
+  if(scale < 100 && scale >= 0) {
     scale += 25;
     scalePercent = scale / 100;
-    scaleValue.value = scale + '%';
-    imageToScale.style.transform = 'scale(' + scalePercent + ')';
+    scaleValue.value = `${scale}%`;
+    imageToScale.style.transform = `scale(${scalePercent})`;
   }
 });