Форма

Необходимо создать верстку для формы-анкеты используя переиспользуемые stateless комопненты React.

Пишем только на классовых компонентах.

На странице должен быть заголовок «Создание анкеты».

А ниже такие поля как

• «Имя»
• «Фамилия»
• «Дата рождения»
• «Телефон»
• «Сайт»
• «О себе»
• «Стек технологий»
• «Описание последнего проекта».

В конце должен быть блок с кнопками «Отмена» и «Сохранить».

Над каждым полем должна быть подпись (label).

Помимо подписи должен быть еще соответствующий placeholder.

Поля

• «О себе»
• «Стек технологий»
• «Описание последнего проекта» должны быть сделаны как многострочные поля ввода с фиксированным количеством строк для ввода (7 строк).

Страничка должна быть презентабельной – дизайн на ваш вкус. Используем только React и CSS модули.

Другие вспомогательные библиотеки использовать нельзя.

Используя форму-анкету из предыдущего ДЗ наполним её логикой.

Все поля должны быть обязательны к заполнению и иметь валидацию.

Так же все поля не должны учитывать пробелы с начала и в конце текста. Если какое-то поле пустое, то при нажатии на кнопку «Сохранить», под каждым пустым полем должно появится сообщение что «Поле пустое. Заполните пожалуйста». Если поле не проходит валидацию, под ним должно появляться сообщение с причиной что пошло не так.

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

• «Дата рождения» - обычный дейт пикер.

• «Телефон» - набор цифр, формата 7-7777-77-77, максимум 12 символом с учетом дефисов. Дополнительное задание: телефон должен вводиться таким образом чтобы не было необходимости вручную проставлять дефисы (см. маска для input).

• «Сайт» - всегда должен начинаться с https:// - в противном случае поле невалидное.

• Поля «О себе», «Стек технологий», «Описание последнего проекта» должно иметь ограничение в 600 символов, и под каждым полем должен отображаться счетчик сколько символов еще доступно для ввода (например «Осталось 477/600 символов»). Счетчик должен обновляться по мере заполнения поля текстом. Если в поле больше символов чем позволено, сообщение со счетчиком должно заменяться на сообщение с предупреждением «Превышен лимит символов в поле».

После того как все поля заполнены валидными данными. То при нажатии на кнопку «Сохранить» - форма должна исчезнуть и появиться анкета c ранее заполненными данными, заголовок анкеты должен состоять из ранее введенных имени и фамилии.

При нажатии на кнопку «Отмена» - все поля формы должны очиститься, все ошибки под полями исчезнуть – форма должна вернуться в исходное состояние.

Для выполнения задания используем только React (классовые компоненты). Другие вспомогательные библиотеки использовать нельзя.

Стилизуем приложение на свой вкус с помощью CSS модулей.