Вы находитесь на странице: 1из 5

6⃣

Описание. Проектная работа 6


В этой проектной работе вы продолжите расширять функциональность
проекта Mesto:

разработаете валидацию всех форм,

улучшите UX при работе с попапами.

Так будет выглядеть готовая проектная работа

0. Сдача проектной работы


Продолжайте писать код в проекте, который сделали за предыдущие две
недели. Тогда по истории комитов будет видно, что вы создали этот проект от
начала и до конца.
Готовую работу не забудьте запушить к себе в «Гитхаб». Репозиторий тот же
— mesto.

Описание. Проектная работа 6 1


1. Валидация формы «Редактировать профиль»
Валидируйте форму «Редактировать профиль». Для этого заготовьте
элементы ошибок по макету в «Фигме».

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7fb0113c-
460e-4b2a-86e4-feb596e53cbc/edit-ru.mov

Если поле формы «Редактировать профиль» не прошло валидацию, под ним


должен появляться красный текст ошибки.
Настройки валидации такие:

оба поля обязательные;

в поле «Имя» должно быть от 2 до 40 символов;

в поле «О себе» должно быть от 2 до 200 символов;

Используйте стандартные браузерные тексты ошибок.


Если хотя бы одно из полей не прошло валидацию, кнопка «Сохранить»
должна быть неактивной. Если оба поля прошли — активной. Цвета
неактивных кнопок возьмите из макета.

2. Валидация формы «Новое место»


Валидируйте форму добавления места. Задание аналогично предыдущему, но
есть отличия:

 Не нужна проверка длины текста у поля ссылки.

 Нужна проверка того, что ввели именно ссылку.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7a13241e-
99b24c4b-bf6d-624c9494440a/validation-add.mov

Так работает валидация формы «Новое место»

Описание. Проектная работа 6 2


Настройки валидации такие:

оба поля обязательные,

в поле «Название» должно быть от 1 до 30 символов,

в поле «Ссылка на картинку» должен быть URL.

И снова используйте стандартные браузерные тексты ошибок.

Если хотя бы одно из полей не прошло валидацию, кнопка «Сохранить»


должна быть неактивной. Если оба поля прошли — активной. Цвета
неактивных кнопок те же.

3. Закрытие попапа кликом на оверлей


Дайте пользователям возможность закрывать попап кликом на оверлей
(транслитерация англ. overlay, «наложение»; имеется в виду, что попап
закроется, если кликнуть за его пределами):

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/addee2d7
88444954-a257-fa3fd12f51d3/overlay.mov

Попап закрывается кликом на тёмный фон

4. Закрытие попапа нажатием на Esc


Дайте пользователям возможность закрывать попап нажатием на клавишу
Esc.

Требования к коду
Общие требования. В этом спринте мы будем пристальнее следить, как
объявлены переменные и как код разбит на функции. Старайтесь делать так,
чтобы каждая функция выполняла лишь одно действие.

Требования к валидации форм. Разбейте код валидации на функции. Вы уже


делали это в теме «Валидация форм». Сделайте функцию enableValidation
ответственной за включение валидации всех форм. Пусть она принимает как
объект настроек все нужные функциям классы и селекторы элементов:

Описание. Проектная работа 6 3


// включение валидации вызовом enableValidation
// все настройки передаются при вызове

enableValidation({
formSelector: '.popup__form',
inputSelector: '.popup__input',
submitButtonSelector: '.popup__button',
inactiveButtonClass: 'popup__button_disabled',
inputErrorClass: 'popup__input_type_error',
errorClass: 'popup__error_visible'
});

Также выделите код валидации в отдельный файл validate.js и подключите


его в  index.html .

При проблемах с «Фигмой»


У «Фигмы» есть ограничение на количество одновременных посетителей.
Может оказаться, что в макет зашло слишком много студентов, и «Фигма»
вас не пустит.

Чтобы этого избежать, скачайте себе копию макета. Легче всего это сделать
из приложения Figma для компьютера. После авторизации скачайте копию
проекта с расширением .fig :

Сохранение проекта на компьютер

Описание. Проектная работа 6 4


Чтобы импортировать файл обратно в «Фигму», нажмите на иконку ”import“ в
правом верхнем углу:

Импорт файла в «Фигму»

Файл загрузится на вашу личную доску. Комментарии пропадут, но всё


необходимое для работы над макетом всегда будет под рукой.

Если экспортировать макет не удаётся, скачайте его по прямой ссылке.

Описание. Проектная работа 6 5