Реализовать форму оплаты, используя данный макет:
Необходимо сверстать макет и реализовать следующую логику:
- Переключение табов Credit card, Gift card и PayPal:
- У каждого из табов должно быть отдельное содержимое.
- По умолчанию должен быть открытым таб Credit card.
- Активный таб выделяется фоном.
- Внутри таба Credit card:
- Необходимо принудительное приведение к корректному формату содержимое поля Credit card: в поле можно ввести только целые числа, которые автоматически будут объединены в группы по четыре символа, разделенные пробелами.
- Все поля должны быть обязательны к заполнению.
- Поле CVV Number должно быть ограничено тремя целочисленными символами.
- При наведении мыши на иконку с вопросительным знаком внутри поля CVV Number необходимо отображать tooltip, объясняющий местонахождение CVV-кода на поверхности банковской карты. Наполнение и верстку tooltip реализовать произвольно в общем стиле макета.
- У остальных двух табов содержимое можно оставить пустым.
- При нажатии на Terms and Conditions должно показываться всплывающее окно.
- Заголовок окна: Terms and Conditions.
- Наполнение — произвольное количество абзацев lorem ipsum.
- При нажатии на Place order должны выполняться:
- проверка корректности введенных значений в форму Credit card,
- проверка, что отмечен чекбокс I accept the Terms and Conditions.
- Структурировать код, реализовывать его в рамках парадигм MVC/MVVM/Functional programming. Можно использовать фреймворки React или Vue.js. Можно использовать jQuery для работы с DOM, Lodash/Underscore или др. подобные библиотеки для работы с данными, массивами, объектами.
- Использовать семантическую верстку, именовать блоки и элементы по БЭМ. Можно использовать UI-фреймворки (Bootstrap/Foundation/Semantic UI и т. п.), либо просто сетки.
- Старые браузеры не поддерживать: должно работать в самых новых версиях Firefox и Chrome.
- Результат оформить в виде репозитория на Github.