R50 4898828f7745d9051a55c29618addcf9
Fullstack JS Developer

SPA Vue

Добавлено 16 июл 2019 в 09:37
Проект выполнен в рамках тестового задания:

Тестовое задание
Целью задания является создание одностраничного приложения с использованием фреймворка Vue. В приложении должен быть липкий (sticky) header и карусель картинок. Должна быть реализована имитация формы обратной связи. Приложение должно быть отзывчивым (responsive). Можно использовать Vue CLI, или любой другой шаблон / веб-пакет / подход.

На странице будет следующее:

Заголовок
Должен иметь 3 навигационных элемента "Home", "About Us" и "Contact Us". Размер шрифта / шрифт / цвета - на ваше усмотрение. Вы можете добавить пустое место в конце документа, чтобы можно было проверить липкость на мобильных и настольных устройствах.

Карусель
Содержит набор картинок, которые являются ссылками. Должна быть возможность "свайпить" их, как на мобильных так и на настольных устройствах, при этом должна оставаться возможность перехода по ссылке. Карусель должна быть отзывчивой и настраиваться, сколько картинок может отображаться на разных устройствах. По умолчанию на настольных устройствах нужно отображать 3 картинки, на мобильных - одну. Карусель должна поддерживать всю функциональность и на мобильных устройствах. Выбор дизайна на ваше усмотрение.

Форма связи
Сделать маршрут /contact и разместить пункт меню для перехода к нему. На странице сделать форму с полями. Поля для формы следует хранить в глобальном хранилище vuex Name - заполнено значением по умолчанию из vuex, валидация - не короче 3 символов. Phone - маска номера телефона твоей страны, валидация - 11 символов начиная с цифры кода вашей страны. Message - textarea со счетчиком введенных символов, максимум 250 символов.

После отправки формы нужно обновить значения полей в глобальном хранилище. Разместить json файл в котором будет ответ сервера об успешной отправке формы и сделать имитацию запроса к серверу. Ответ с сообщением об успешной отправке показать пользователю.

Рекомендации
Можете использовать любые CSS / JS-библиотеки, изображения, структуру, любые mixins / sass / less, с которыми вам удобно работать. При необходимости добавьте инструкции (например, сборка npm run) Что мы ожидаем увидеть Разместите где-то готовый собранный проект, чтобы можно было оценить визуально выполнение задания. Учтено будет не только качество кода, но и проработку визуальной части. Хочется увидеть симпатичную, “ровную” страничку без лишних артефактов и неадекватного поведения объектов. И конечно чистый, читаемый, отформатированный код, с правильной архитектурой. После завершения нужно разместить свой код на публичном git-репозитории, например, GitHub. Разместить работающую страницу на любом подходящем сервисе, например, GitHub Pages. Выслать информацию о том сколько времени потребовалось на задание и ссылки на репозиторий и готовую страницу.
822e052eff 1e934f4e7e