Skip to content

Commit

Permalink
Merge pull request #9 from ClaireFotina/module9-task2
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Dec 17, 2024
2 parents 9619bc3 + 6aac280 commit a57edec
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 115 deletions.
77 changes: 48 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>

Expand All @@ -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>
Зной
Expand Down Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
4 changes: 2 additions & 2 deletions js/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ const EFFECTS_STYLES = {
INVERT: 'invert',

Check failure on line 14 in js/constants.js

View workflow job for this annotation

GitHub Actions / Check 

Expected indentation of 2 spaces but found 4
BLUR: 'blur',
BRIGHTNESS: 'brightness'
}
};

const UNITS = {
PX: 'px',
NONE: '',
PS: '%'
}
};

export const EffectsSetting = {
[EFFECTS.NONE]: {
Expand Down
12 changes: 6 additions & 6 deletions js/data.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {getRandomInteger} from './util.js'
import { getRandomInteger } from './util.js';

const COUNT_PHOTO = 25;
const MIN_LIKES = 15;
Expand Down Expand Up @@ -50,8 +50,8 @@ const getComments = () => {
}
)
}
return comments
}
return comments;
};


const getPhoto = (i) => {
Expand All @@ -62,7 +62,7 @@ const getPhoto = (i) => {
likes: getRandomInteger(MIN_LIKES, MAX_LIKES),
comments: getComments()
}
}
};

const getData = () => {
const data = [];
Expand All @@ -71,6 +71,6 @@ const getData = () => {
}

return data;
}
};

export {getData};
export { getData };
12 changes: 6 additions & 6 deletions js/effects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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;
Expand All @@ -54,6 +54,6 @@ effectsList.addEventListener('change', ({ target }) => {
updateSlider();
sliderBlock.classList.remove('hidden');
}
})
});

reset()
24 changes: 12 additions & 12 deletions js/form.js
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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');
Expand All @@ -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);
Loading

0 comments on commit a57edec

Please sign in to comment.