https://github.com/kateryna-borysenko/andersen-form
React intensive at Andersen
https://github.com/kateryna-borysenko/andersen-form
classcomponents cssmodules-react hooks react
Last synced: about 2 months ago
JSON representation
React intensive at Andersen
- Host: GitHub
- URL: https://github.com/kateryna-borysenko/andersen-form
- Owner: Kateryna-Borysenko
- Created: 2022-07-18T16:17:44.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T08:38:06.000Z (about 2 years ago)
- Last Synced: 2025-06-14T07:05:22.610Z (12 months ago)
- Topics: classcomponents, cssmodules-react, hooks, react
- Language: JavaScript
- Homepage:
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Форма
Необходимо создать верстку для формы-анкеты используя переиспользуемые stateless комопненты React.
Пишем только на классовых компонентах.
На странице должен быть заголовок «Создание анкеты».
А ниже такие поля как
- «Имя»
- «Фамилия»
- «Дата рождения»
- «Телефон»
- «Сайт»
- «О себе»
- «Стек технологий»
- «Описание последнего проекта».
В конце должен быть блок с кнопками «Отмена» и «Сохранить».
Над каждым полем должна быть подпись (label).
Помимо подписи должен быть еще соответствующий placeholder.
Поля
- «О себе»
- «Стек технологий»
- «Описание последнего проекта»
должны быть сделаны как многострочные поля ввода с фиксированным количеством строк для ввода (7 строк).
Страничка должна быть презентабельной – дизайн на ваш вкус.
Используем только React и CSS модули.
Другие вспомогательные библиотеки использовать нельзя.
#
Используя форму-анкету из предыдущего ДЗ наполним её логикой.
Все поля должны быть обязательны к заполнению и иметь валидацию.
Так же все поля не должны учитывать пробелы с начала и в конце текста.
Если какое-то поле пустое, то при нажатии на кнопку «Сохранить», под каждым пустым полем должно появится сообщение что «Поле пустое.
Заполните пожалуйста». Если поле не проходит валидацию, под ним должно появляться сообщение с причиной что пошло не так.
- Поля «Имя», «Фамилия» при их заполнении должны содержать проверку на то что первый символ это всегда большая буква.
- «Дата рождения» - обычный дейт пикер.
- «Телефон» - набор цифр, формата 7-7777-77-77, максимум 12 символом с учетом дефисов. Дополнительное задание: телефон должен вводиться таким образом чтобы не было необходимости вручную проставлять дефисы (см. маска для input).
- «Сайт» - всегда должен начинаться с https:// - в противном случае поле невалидное.
- Поля «О себе», «Стек технологий», «Описание последнего проекта» должно иметь ограничение в 600 символов, и под каждым полем должен отображаться счетчик сколько символов еще доступно для ввода (например «Осталось 477/600 символов»). Счетчик должен обновляться по мере заполнения поля текстом.
Если в поле больше символов чем позволено, сообщение со счетчиком должно заменяться на сообщение с предупреждением «Превышен лимит символов в поле».
После того как все поля заполнены валидными данными. То при нажатии на кнопку «Сохранить» - форма должна исчезнуть и появиться анкета c ранее заполненными данными, заголовок анкеты должен состоять из ранее введенных имени и фамилии.
При нажатии на кнопку «Отмена» - все поля формы должны очиститься, все ошибки под полями исчезнуть – форма должна вернуться в исходное состояние.
Для выполнения задания используем только React (классовые компоненты). Другие вспомогательные библиотеки использовать нельзя.
Стилизуем приложение на свой вкус с помощью CSS модулей.