Данный проект представляет собой форму онлайн-оплаты, разработанную с использованием современных технологий.
- Номер карты Поле для ввода номера кредитной карты. При вводе номера карты, автоматически игнорируются любые символы, кроме цифр. Цифры разделяются автоматически по 4 штуки пробелом, для удобства восприятия.
- Дата окончания Поле для ввода даты окончания действия карты в формате "ММ/ГГ". При вводе, данные разделяются символом "/", если в поле введено 2 цифры месяца. Дата окончания должна быть больше текущей даты.
- CVC/CVV Поле для ввода CVC/CVV кода карты. Требуется ввод строго 3 цифр.
- Email Поле для ввода адреса электронной почты.
- Кнопка "Оплатить" Отключена до тех пор, пока пользователь не заполнит корректно все обязательные поля. Кнопка становится активной только после корректного заполнения всех полей.
Валидация: проверка корректности введенных данных происходит при потере фокуса на каждом поле (событие blur). Если данные некорректны, отображается соответствующая ошибка.
- Vite - современная система сборки
- Redom - библиотека для создания пользовательских интерфейсов
- Tailwind CSS - CSS-фреймворк для быстрой разработки
- card-validator - библиотека для валидации номеров кредитных карт
- inputmask - библиотека для форматирования ввода данных
- Jest - фреймворк для тестирования JavaScript кода
- клонируйте репозиторий:
git clone https://github.com/MashaMoreva/online-payment-form.git - перейдите в директорию проекта:
cd online-payment-form - установите зависимости:
npm install - сборка проекта:
npm run build - запустите проект в режиме разработки:
npm run start(приложение будет доступно по адресу http://localhost:3000) - запустите тесты:
npm run test