-
Динамический градиентный фон
Главная задача фронтендера — занять посетителя сайта даже при не
очень комфортном действии, как регистрация. Исходя из этой мысли,
было решено анимировать фон с эффектом лаволампы и пузыря,
следящего за курсором, для залипательности. Важно сделать фон
ненавязчивым. Для этого есть много готовых решений с применением
canvas, но для презентационного проекта хватит и нативного JS +
CSS.
-
Light/Dark Mode
Поскольку градиентные пузыри выглядят эффектнее на темном фоне,
было решено внедрить эту функцию. Само собой, пришлось учитывать
состояние цвета самой формы и других элементов, логотипа и даже
фавикона. Функцию darkMode я вынес в отдельный скрипт, где легко
контролирую состояние компонентов. Для технического задания это
более чем удобно, но в большом проекте, возможно, я бы слегка
скорректировал логику. Также было важно не сбрасывать отрисовку
Light/Dark Mode при перезагрузке страницы. Для этого я храню
состояние в localStorage.
-
Ревью выполненной работы
Чтобы не писать в комментариях ход выполненной работы, было решено
вынести ревью в клиентский интерфейс.
-
Подсказка городов
В 2025 году пользователь привык к всяческим подсказкам, маскам на
номере телефона, автозаполнению и т.д. Так как здесь не
указывается номер телефона, я решил, что наиболее релевантным
примером будут города. Нецелесообразно хранить в файлах сайта
более 1000 городов России, поэтому я воспользовался сторонним API
для предложения адресов, исходя из введенных символов. Так как
подсказка с легкостью определяет не только города, но и точные
улицы и номера домов, я изменил плейсхолдер на “адрес”. Для более
интуитивного управления выбором городов в предложенном списке
можно осуществить через клавиатуру.
-
Уведомление
На первый взгляд это не самый первостепенный, но довольно важный
элемент интерфейса — уведомление пользователя о проделанном
действии. Постарался сделать его не слишком навязчивым, но
заметным.
-
Отправка данных в консоль
Для сборки и вывода данных пользователя в консоль,а так же
предполагаемой отправки данных на сервер подготовил объект в
формате json.
