- Студент: Ирина Трубчик.
- Наставник: Денис Лопатин
Не удаляйте и не изменяйте самовольно файлы и папки:
.editorconfig, .eslintrc, .gitattributes, .gitignore, package-lock.json, package.json., .github
Как работать с Git на проекте | Как работать над проектом
Модуль отрисовки миниатюр создан и подключён:
Структура thumbnails.js:
createPictureElement(photo) — создаёт DOM-элемент миниатюры renderPictures() — отрисовывает все миниатюры в .pictures через DocumentFragment Что делает:
Берёт данные из массива photos Для каждой фотографии создаёт клон шаблона #picture Заполняет: src ← photo.url alt ← photo.description .picture__comments ← photo.comments.length .picture__likes ← photo.likes Вставляет все элементы через DocumentFragment
Реализован сценарий просмотра фотографий в полноразмерном режиме:
Созданные модули:
big-picture-view.js — отрисовка полноразмерного изображения:
openPicture(photo) — открывает окно с данными фотографии closePicture() — закрывает окно initPictureModal(onClose) — инициализирует обработчики закрытия (Esc, клик по иконке, клик по фону) renderComments(comments) — отрисовывает список комментариев gallery.js — связующий модуль:
initGallery(photos) — инициализирует галерею, обрабатывает клики на миниатюры Функционал:
✅ Открытие по клику на миниатюру ✅ Заполнение данными: url, likes, comments, description ✅ Отрисовка комментариев с аватарами ✅ Скрытие .social__comment-count и .comments-loader ✅ Добавление modal-open к при открытии ✅ Закрытие по Esc и клику на иконку закрытия
Реализована постраничная загрузка комментариев:
Изменения в big-picture-view.js:
- Добавлена константа
COMMENTS_PER_PAGE = 5 - Добавлены переменные состояния:
currentComments,displayedCommentsCount - Функция
renderComments()доработана для отрисовки порции комментариев (параметры start, end) - Добавлена функция
updateCommentCount()— обновляет счётчик показанных комментариев - Добавлена функция
loadMoreComments()— загружает следующую порцию из 5 комментариев - Функция
openPicture()теперь:- Показывает блоки
.social__comment-countи.comments-loader(убирает класс hidden) - Инициализирует состояние комментариев
- Загружает первую порцию из 5 комментариев
- Показывает блоки
- Функция
closePicture()сбрасывает состояние комментариев - В
initPictureModal()добавлен обработчик клика на кнопку «Загрузить ещё»
Функционал:
✅ При открытии фотографии показываются только первые 5 комментариев
✅ Блок .social__comment-count отображает «5 из N комментариев»
✅ Кнопка «Загрузить ещё» видна и активна
✅ При клике на кнопку добавляются следующие 5 комментариев
✅ Счётчик обновляется после каждой порции
✅ Кнопка скрывается, когда показаны все комментарии
✅ Состояние сбрасывается при закрытии окна
Реализована работа с формой загрузки изображения с полной валидацией:
Созданные модули:
upload-form.js — модуль работы с формой загрузки:
initUploadForm()— инициализация всех обработчиков формыopenForm()— открытие формы с выбранным файломcloseForm()— закрытие формы со сбросом состоянияinitSlider()— инициализация noUiSlider для эффектовinitValidation()— настройка валидации PristineshowSuccessMessage()/showErrorMessage()— показ сообщений
Изменения в index.html:
- Добавлены атрибуты формы:
method="post",enctype="multipart/form-data",action="https://31.javascript.htmlacademy.pro/kekstagram" - Подключены стили noUiSlider и скрипты библиотек (nouislider.js, pristine.min.js)
Функционал:
Открытие/закрытие формы:
✅ Открытие при выборе файла через .img-upload__input
✅ Добавление modal-open к <body> при открытии
✅ Закрытие по кнопке .img-upload__cancel или Esc
✅ Сброс всех полей и значения input file при закрытии
Масштаб изображения:
✅ Кнопки «Уменьшить»/«Увеличить» изменяют масштаб на 25%
✅ Диапазон масштаба: 25%–100%
✅ Применение transform: scale() к изображению
Эффекты и слайдер: ✅ 5 эффектов: Хром, Сепия, Марвин, Фобос, Зной + Оригинал ✅ noUiSlider для регулировки интенсивности эффекта ✅ Применение CSS filter к изображению и превью эффектов ✅ Скрытие слайдера для эффекта «Оригинал»
Валидация хэштегов (Pristine): ✅ Хэштег начинается с #, содержит только буквы и цифры ✅ Длина хэштега ≤ 20 символов ✅ Не более 5 хэштегов ✅ Хэштеги не повторяются (регистронезависимо) ✅ Разные сообщения об ошибках для каждого случая
Валидация комментария: ✅ Максимальная длина — 140 символов ✅ Сообщение об ошибке при превышении
Отправка формы: ✅ Отправка через FormData с помощью fetch (POST, multipart/form-data) ✅ Блокировка кнопки «Опубликовать» на время отправки ✅ Показ сообщения об успехе после успешной отправки ✅ Показ сообщения об ошибке при неудаче ✅ Закрытие формы и сброс полей после успешной отправки
Сообщения: ✅ Сообщение об успехе (#success) — закрывается по кнопке, Esc, клику вне области ✅ Сообщение об ошибке (#error) — закрывается по кнопке, Esc, клику вне области
Особенности:
✅ Блокировка Esc при фокусе на полях хэштегов и комментария (stopPropagation)
✅ Отображение ошибок в .img-upload__field-wrapper--error
Результат:
Масштаб — уже был реализован: значение записывается в name="scale" (readonly-поле) и применяется визуально через transform: scale().
2. noUiSlider для эффектов — вынес применение фильтра в отдельную функцию applyEffect(), чтобы избежать проблем с замыканием. Теперь:
3 При инициализации слайдера значение эффекта сразу записывается в effectLevelValue и применяется визуально При переключении фильтра слайдер пересоздаётся с начальным значением (effect.start), и эффект сразу сбрасывается При перемещении ползунка значение обновляется и в поле формы, и визуально
Раздел 1 — Загрузка нового изображения ✅ Все пункты 1.1–1.3 реализованы корректно: выбор файла, открытие/закрытие формы, подстановка изображения в preview и превью эффектов.
Раздел 2 — Редактирование изображения ✅
Исправлено: Селектор preview изменён с .img-upload__preview img на .img-upload__preview. Теперь transform: scale() применяется к контейнеру, а filter — к вложенному , что соответствует ТЗ.
Раздел 2.3–2.4 — Хэштеги и комментарий ✅ Валидация, сообщения об ошибках, поведение Esc — всё корректно.
Раздел 3 — Отправка данных на сервер ✅ POST, FormData, блокировка кнопки, сообщения об успехе/ошибке — всё соответствует.
Раздел 4 — Просмотр загруженных изображений ✅ Загрузка данных, миниатюры, полноэкранный просмотр, комментарии порциями по 5, кнопка «Загрузить ещё» — всё реализовано.
Раздел 5 — Фильтрация ✅ Исправлено:
debounce теперь корректно работает с this (обычные функции вместо стрелочных) Фильтрация и перерисовка выполняются вместе внутри debounced-функции с задержкой 500мс Блок .img-filters--inactive скрывается через opacity: 0 в CSS и показывается после загрузки данных
Установка автотеста Cypress и его прохождение
В рамках доработки проекта были внесены изменения в логику работы формы загрузки изображения с целью устранения некорректного поведения и приведения реализации в соответствие с техническим заданием.
Удалён обработчик события reset, который ранее вызывал функцию закрытия формы. В предыдущей реализации это приводило к повторному вызову form.reset() внутри closeForm(), что могло вызывать некорректное поведение.
Сброс формы теперь выполняется централизованно внутри функции закрытия формы.
Результат:
- устранён риск рекурсивных вызовов;
- обеспечено корректное закрытие формы;
- поведение формы соответствует ожидаемому сценарию.
Добавлена проверка формата файла перед открытием формы редактирования.
Форма открывается только в случае, если выбран файл одного из поддерживаемых форматов:
jpg; jpeg; png; gif
При выборе неподдерживаемого файла форма не открывается, значение поля сбрасывается.
Результат:
- предотвращено открытие формы с некорректными данными;
- обеспечена стабильность работы блока предпросмотра изображения.
После внесённых изменений реализовано корректное поведение формы:
- форма открывается после выбора корректного изображения;
- форма закрывается:
- по нажатию на кнопку закрытия;
- по нажатию клавиши Esc, если фокус не находится в полях ввода;
- при фокусе в полях ввода (хэштеги, комментарий) нажатие Esc не закрывает форму;
- при закрытии формы выполняется полный сброс состояния:
- масштаб изображения возвращается к 100%;
- выбранный эффект сбрасывается на «Оригинал»;
- значения полей ввода очищаются;
- поле выбора файла сбрасывается.
Указанное поведение соответствует требованиям технического задания проекта.
В рамках доработки проекта выполнен рефакторинг модуля загрузки изображения с целью повышения читаемости, снижения сложности функций и устранения потенциальных проблем при работе с формой.
- Упрощена логика обработки событий формы: сложные обработчики разбиты на небольшие функции с единственной ответственностью.
- Снижена когнитивная сложность функций (
createFormHandlers,createOnEscapePress, валидация хэштегов) за счёт выноса условий в отдельные предикаты и helper-функции. - Устранено дублирование кода при формировании результатов валидации (
createValidResult,createInvalidResult). - Логика закрытия формы по клавише
Escapeприведена к более декларативному виду через единый предикатshouldSkipEscapeClose. - Упрощена валидация хэштегов: проверки разбиты на независимые функции, улучшена читаемость и поддерживаемость.
- Централизован сброс состояния формы и эффектов, что уменьшило дублирование и повысило предсказуемость поведения.
- Улучшена читаемость и поддерживаемость кода.
- Снижена сложность ключевых функций без изменения поведения.
- Сохранено соответствие техническому заданию.
- Поведение формы стабильно при повторных открытиях и отправке данных.
Репозиторий создан для обучения на интенсивном онлайн‑курсе «JavaScript. Профессиональная разработка веб-интерфейсов» от HTML Academy.