✔️ Сборка #12

Author: Keks

12/js/form.js

@@ -50,8 +50,8 @@ const updatePreview = (target) => {
     const url = URL.createObjectURL(file);
     uploadPreview.src = url;
 
-    uploadPreviewEffects.forEach((element) => {
-      element.style.backgroundImage = `url(${url})`;
+    uploadPreviewEffects.forEach((effectPreview) => {
+      effectPreview.style.backgroundImage = `url(${url})`;
     });
   }
 };
@@ -76,9 +76,9 @@ const toggleButtonState = (state) => {
   sendButton.textContent = state ? SendButtonText.SENDING : SendButtonText.DEFAULT;
 };
 
-const sendFormData = async (formElement) => {
+const sendFormData = async () => {
   if (pristine.validate()) {
-    const formData = new FormData(formElement);
+    const formData = new FormData(form);
     toggleButtonState(true);
     try {
       await sendData(formData);
@@ -93,7 +93,7 @@ const sendFormData = async (formElement) => {
 
 const formSubmitHandler = (evt) => {
   evt.preventDefault();
-  sendFormData(evt.target);
+  sendFormData();
 };
 
 form.querySelector('.img-upload__input').addEventListener('change', imgUploadChangeHandler);

12/js/image-editor.js

@@ -45,7 +45,7 @@ const scaleValue = form.querySelector('.scale__control--value');
 const imgPreview = form.querySelector('.img-upload__preview').querySelector('img');
 
 const sliderContainer = form.querySelector('.effect-level');
-const sliderElement = sliderContainer.querySelector('.effect-level__slider');
+const slider = sliderContainer.querySelector('.effect-level__slider');
 const sliderValue = sliderContainer.querySelector('.effect-level__value');
 const effectsContainer = form.querySelector('.effects');
 let currentScale = 100;
@@ -79,7 +79,7 @@ const bigBtnClickHandler = () => {
 smallBtn.addEventListener('click', smallBtnClickHandler);
 bigBtn.addEventListener('click', bigBtnClickHandler);
 
-noUiSlider.create(sliderElement, {
+noUiSlider.create(slider, {
   range: {
     min: 0,
     max: 100,
@@ -93,9 +93,9 @@ noUiSlider.create(sliderElement, {
   },
 });
 
-sliderElement.noUiSlider.on('update', () => {
+slider.noUiSlider.on('update', () => {
   if (currentEffect !== 'none') {
-    sliderValue.value = sliderElement.noUiSlider.get();
+    sliderValue.value = slider.noUiSlider.get();
     imgPreview.style.filter = `${currentStyle.effect}(${sliderValue.value}${currentStyle.units ?? ''})`;
   }
 });
@@ -108,14 +108,14 @@ effectsContainer.addEventListener('change', (evt) => {
     return;
   }
   currentStyle = SliderInfo[currentEffect];
-  sliderElement.noUiSlider.updateOptions({
+  slider.noUiSlider.updateOptions({
     range: {
       min: currentStyle.min,
       max: currentStyle.max,
     },
     step: currentStyle.step,
   });
-  sliderElement.noUiSlider.set(currentStyle.max);
+  slider.noUiSlider.set(currentStyle.max);
   sliderContainer.classList.remove('hidden');
 });
 

12/js/notification.js

@@ -4,10 +4,10 @@ const body = document.body;
 
 const closeNotification = (evt) => {
   evt.stopPropagation();
-  const element = document.querySelector('.success') || document.querySelector('.error');
-  const closeButton = element.querySelector('.success__button') || element.querySelector('.error__button');
-  if (evt.target === element || evt.target === closeButton || isEscapeKey(evt)) {
-    element.remove();
+  const notification = document.querySelector('.success') || document.querySelector('.error');
+  const closeButton = notification.querySelector('.success__button') || notification.querySelector('.error__button');
+  if (evt.target === notification || evt.target === closeButton || isEscapeKey(evt)) {
+    notification.remove();
     body.removeEventListener('click', bodyClickHandler);
     body.removeEventListener('keydown', bodyKeydownHandler);
   }

12/js/pictures-renderer.js

@@ -1,22 +1,22 @@
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureContainer = document.querySelector('.pictures');
 let picturesFragment;
-const createPictureElement = (photo) => {
-  const pictureElement = pictureTemplate.cloneNode(true);
-  const img = pictureElement.querySelector('.picture__img');
+const createPicture = (photo) => {
+  const picture = pictureTemplate.cloneNode(true);
+  const img = picture.querySelector('.picture__img');
   img.src = photo.src;
   img.alt = photo.alt;
-  pictureElement.querySelector('.picture__comments').textContent = photo.comments;
-  pictureElement.querySelector('.picture__likes').textContent = photo.likes;
-  pictureElement.dataset.id = photo.id;
-  return pictureElement;
+  picture.querySelector('.picture__comments').textContent = photo.comments;
+  picture.querySelector('.picture__likes').textContent = photo.likes;
+  picture.dataset.id = photo.id;
+  return picture;
 };
 
 const createPictures = (photos) => {
   const fragment = document.createDocumentFragment();
   photos.forEach((photo) => {
-    const pictureElement = createPictureElement(photo);
-    fragment.appendChild(pictureElement);
+    const picture = createPicture(photo);
+    fragment.appendChild(picture);
   });
   return fragment;
 };

12/js/popup.js

@@ -16,18 +16,18 @@ class Popup {
     this.commentTemplate = this.popup.querySelector('.social__comment');
     this.closeButton = this.popup.querySelector('.big-picture__cancel');
     this.commentsCount = 0;
+    this.comments = [];
     this.photo = {};
     this.attachHandlers();
   }
 
-  comments = [];
-
   createComment = (comment) => {
-    const commentElement = this.commentTemplate.cloneNode(true);
-    commentElement.querySelector('.social__picture').src = comment.avatar;
-    commentElement.querySelector('.social__picture').alt = comment.name;
-    commentElement.querySelector('.social__text').textContent = comment.message;
-    return commentElement;
+    const commentTemplate = this.commentTemplate.cloneNode(true);
+    const socialPicture = commentTemplate.querySelector('.social__picture');
+    socialPicture.src = comment.avatar;
+    socialPicture.alt = comment.name;
+    commentTemplate.querySelector('.social__text').textContent = comment.message;
+    return commentTemplate;
   };
 
   addComments = () => {

12/js/util.js

@@ -4,9 +4,9 @@ const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const showErrorMessage = () => {
   const errorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
-  const errorElement = errorTemplate.cloneNode(true);
-  document.body.append(errorElement);
-  setTimeout(() => errorElement.remove(), REMOVE_MESSAGE_TIMEOUT);
+  const error = errorTemplate.cloneNode(true);
+  document.body.append(error);
+  setTimeout(() => error.remove(), REMOVE_MESSAGE_TIMEOUT);
 };
 
 function debounce (callback, timeoutDelay = 500) {

12/js/validator.js

@@ -35,7 +35,7 @@ let errorMessage = '';
 
 const pristine = new Pristine(form, {
   classTo: 'img-upload__field-wrapper',
-  errorTextClass: '.img-upload__field-wrapper--error',
+  errorTextClass: 'img-upload__field-wrapper--error',
   errorTextParent: 'img-upload__field-wrapper',
 });