Digital-интегратор 5 УГЛОВ

Описание

Тестовое задание вакансии “Верстальщик”.

Цель: сверстать страницу “Оформление заказа” для магазина одежды.

Требования:

• pixel-perfect вёрстка по макету Figma;
• адаптивность и кросс-браузерность;
• использование методологии БЭМ;
• использование препроцессора SАSS;
• анимированные эффекты взаимодествия с интерфейсом;
• логика взаимодействия с интерфесом;
• валидация и отправка формы (вывод в консоль);
• сообщение об успешной отправке заказа;
• двусторонняя связь между полем ввода адреса и картой, подсказки в поле адреса (использовать Dadata и Яндекс карты).

Запуск

Для запуска проекта достаточно клонировать репозиторий и открыть файл index.html. А ещё можно открыть рабочую копию проекта прямо сейчас.

Реализация

Проект реализован без использования каких бы то ни было вспомогательных средств и библиотек - только HTML, CSS и JS. Исключение составляют SASS и Яндекс карты, использование которых является требованием.

Развитие

Данный проект реализован в качестве демонстрационного. Для того, чтобы применить его в реальном продукте, необходим ряд улучшений, например:

• вынести компонент good в <template>, а возможно даже задействовать Shadow DOM - для того, чтобы динамически наполнять список используя AJAX;
• улучшить доступность с помощью ARIA атрибутов;
• задействовать webpack и babel для улучшения производительности и совместимости (минификация, полифилы и т.д.);
• задействовать сторонние библиотеки, например JQuery или React, для оптимизации, расширяемости и более лёгкой поддержки.