Помощь друга

index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <link rel="stylesheet" href="css/normalize.css" />
   <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
   <title>Кекстаграм</title>
 </head>
@@ -283,7 +284,8 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
   <script src="./vendor/pristine/pristine.min.js"></script>
+  <script src="./vendor/nouislider/nouislider.js"></script>
   <script src="./js/main.js" type="module"></script>
 </body>
 
-</html>
+</html>

js/big-picture.js

@@ -1,5 +1,5 @@
 import { initComments } from './comments';
-import { isEscapeKey } from './utils   ';
+import { isEscapeKey } from './utils';
 
 export const body = document.querySelector('body');
 const bigPicture = document.querySelector('.big-picture');

js/image-effects.js

@@ -0,0 +1,122 @@
+const MAX_SCALE = 100;
+const MIN_SCALE = 25;
+const SCALE_STEP = 25;
+const EFFECTS_CONFIG = {
+  none: {
+    min: 0,
+    max: 0,
+    step: 0,
+    style: '',
+    unit: '',
+  },
+  chrome: {
+    min: 0.1,
+    max: 1,
+    step: 0.1,
+    style: 'grayscale',
+    unit: '',
+  },
+  sepia: {
+    min: 0,
+    max: 1,
+    step: 0.1,
+    style: 'sepia',
+    unit: '',
+  },
+  marvin: {
+    min: 0,
+    max: 100,
+    step: 1,
+    style: 'invert',
+    unit: '%',
+  },
+  phobos: {
+    min: 0,
+    max: 3,
+    step: 0.1,
+    style: 'blur',
+    unit: 'px',
+  },
+  heat: {
+    min: 1,
+    max: 3,
+    step: 0.1,
+    style: 'brightness',
+    unit: '',
+  },
+};
+
+const imageUploadWrapper = document.querySelector('.img-upload__wrapper');
+const imageEffectLevel = imageUploadWrapper.querySelector('.img-upload__effect-level');
+const imageEffectSlider = imageUploadWrapper.querySelector('.effect-level__slider');
+const effectLevelValue = imageUploadWrapper.querySelector('.effect-level__value');
+const effectsList = imageUploadWrapper.querySelector('.effects__list');
+const imageUploadScale = imageUploadWrapper.querySelector('.img-upload__scale');
+const scaleControlValue = imageUploadScale.querySelector('.scale__control--value');
+
+const imageUploadPreview = imageUploadWrapper.querySelector('.img-upload__preview');
+const previewImage = imageUploadPreview.querySelector('img');
+
+let currentEffect = 'none';
+imageEffectLevel.classList.add('hidden');
+
+imageUploadScale.addEventListener('click', (evt) => {
+  let currentValue = parseInt(scaleControlValue.value, 10);
+
+  if (evt.target.classList.contains('scale__control--smaller')) {
+    currentValue = Math.max(MIN_SCALE, currentValue - SCALE_STEP);
+  } else if (evt.target.classList.contains('scale__control--bigger')) {
+    currentValue = Math.min(MAX_SCALE, currentValue + SCALE_STEP);
+  } else {
+    return;
+  }
+
+  scaleControlValue.value = `${currentValue}%`;
+  previewImage.style.transform = `scale(${currentValue / 100})`;
+});
+
+noUiSlider.create(imageEffectSlider, {
+  range: { min: 0, max: 100 },
+  start: 100,
+  step: 1,
+  connect: 'lower',
+});
+
+imageEffectLevel.classList.add('hidden');
+
+imageEffectSlider.noUiSlider.on('update', () => {
+  const modelSlider = imageEffectSlider.noUiSlider.get(true);
+  const effectData = EFFECTS_CONFIG[currentEffect];
+
+  if (currentEffect !== 'none') {
+    effectLevelValue.value = modelSlider;
+    imageUploadPreview.style.filter = `${effectData.style}(${modelSlider}${effectData.unit})`;
+  } else {
+    imageUploadPreview.style.filter = '';
+    effectLevelValue.value = '';
+  }
+});
+
+effectsList.addEventListener('change', (evt) => {
+  currentEffect = evt.target.value;
+
+  if (currentEffect === 'none') {
+    imageEffectLevel.classList.add('hidden');
+    imageUploadPreview.style.filter = '';
+  } else {
+    imageEffectLevel.classList.remove('hidden');
+
+    const effectData = EFFECTS_CONFIG[currentEffect];
+
+    imageEffectSlider.noUiSlider.updateOptions({
+      range: {
+        min: effectData.min,
+        max: effectData.max,
+      },
+      start: effectData.max,
+      step: effectData.step,
+    });
+  }
+});
+
+

js/main.js

@@ -2,7 +2,8 @@ import { photosData } from './mock';
 import { renderThumbnails } from './photos';
 import { renderBigPicture } from './big-picture';
 import './upload-form.js';
-import './validation.js';
+import './image-effects.js';
+
 
 renderThumbnails(photosData);
 

js/upload-form.js

@@ -50,9 +50,9 @@
   const isValid = pristineConfig.validate();
 
   if (isValid) {
     console.log('Форма полностью валидна! Можно отправлять на сервер.');
   } else {
-
+    console.log('Форма не валидна!');
   }
 });