olgamorozova88 / kekstagram

Personal project under HTML JavaScript source

Kekstagram

Личный проект по курсу "JavaScript. Профессиональная разработка веб-интерфейсов" от HTML Academy

Опубликованная версия

Особенности реализации:

1. Отрисовка фотографий с отображением количества комментариев и лайков. Для получения данных о фотографии используется Fetch API. В случае успешной загрузки данных с сервера - изображения отрисовываются на странице, в случае ошибки - появляется соответствующее сообщение, которое самое исчезает по истечении 5 секнуд;
2. Изображения на странице могут быть отсортированы случайным образом, по количеству комментариев и по умолчанию (в том порядке, в котором данные приходят с сервера), при этом при переключении фильтра обновление списка изображений происходит не чаще, чем один раз в полсекунды;
3. При клике на миниатюру фотографии, открывается окно просмотра полномасштабной фотографии. По нажатию на иконку крестика или клавишу ESC происходит закрытие окна просмотра фотографии; При открытии полномасштабной фотографии в блоке комментариев отображается не более 5 комментариев, при клике на кнопку Загрузить еще отображаются следующие 5 комментариев.
4. При клике на кнопку Загрузить открывается окно выбора файла для загрузки. После выбора файла, открывается форма редактирования изображения, выбранное изображение подставляется в окно предпросмотра. В редакторе реализована возможность изменения масштаба изображения, наложения эффекта и регулирование его интенсивности, а также настроена валидация хэштегов и комментария. Сообщения о неправильном формате хэштега/комментария задаются с помощью метода setCustomValidity() у соответствующего поля. По нажатию на иконку крестика или клавишу ESC происходит закрытие формы редактирования изображения. Если фокус находится в поле ввода хэштегов или комментария, нажатие на клавишу Esc не приводит к закрытию формы.

• Правила валидации хэштегов:

  • хэш-тег начинается с символа # (решётка);
  • строка после решётки должна состоять из букв и чисел и не может содержать пробелы, спецсимволы (#, @, $ и т. п.), символы пунктуации (тире, дефис, запятая и т. п.), эмодзи и т. д.;
  • хеш-тег не может состоять только из одной решётки;
  • максимальная длина одного хэш-тега 20 символов, включая решётку;
  • хэш-теги нечувствительны к регистру: #ХэшТег и #хэштег считаются одним и тем же тегом;
  • хэш-теги разделяются пробелами;
  • один и тот же хэш-тег не может быть использован дважды;
  • нельзя указать больше пяти хэш-тегов;
  • хэш-теги необязательны;

• Правила валидации комментария:

  • комментарий не обязателен;
  • длина комментария не может составлять больше 140 символов;

5. Форма редактирования изображения отправляется на сервер с помощью Fetch API. При успешной отправке формы, а также в случае ошибки показывается блок с соответствующим сообщением, которое можно закрыть по нажатию на кнопку внутри блока, клику на произвольную область экрана за пределами блока или по нажатию на клавишу ESC. При успешной отправке формы, а также в случае закрытия формы редактирования изображения, все данные, введённые в форму, и контрол фильтра приходят в исходное состояние: + масштаб возвращается к 100%; + эффект сбрасывается на «Оригинал»; + поля для ввода хэш-тегов и комментария очищаются; + поле загрузки фотографии, стилизованное под букву «О» в логотипе, очищается.