Share
Explore

Тестовое задание на вакансию Front-end Developer Junior

Получатель тестового задания Истомина Полина


Необходимо написать простое SPA на Vue, используя следующие инструменты, технологии и подходы:
БЭМ-подход
Препроцессинг CSS (на ваш выбор)
Повторное использование блоков
Разделение кода на Vue компоненты

Описание

Необходимо сверстать блок подачи заявки, макет
.

Header и Footer не имеют значения, можно сделать на свое усмотрение. Адаптивная верстка также на ваше усмотрение.

На первом шаге формы:

Для полей Страна, Тип визы, Количество заездов, Время обработки передается JSON, в рамках задачи файл должен лежать в папке с проектом. Содержимое файла

{
"countries": [
{"id": "RU", "name": "Россия"},
{"id": "DE", "name": "Германия"},
{"id": "EE", "name": "Эстония"},
],
"types": [
{"id": "bis", "name": "Деловая виза", "price": "20,80"},
{"id": "tur", "name": "Туристическая виза", "price": "10,30"},
{"id": "trz", "name": "Транзитная виза", "price": "50,50"},
],
"try": [
{"id": "single", "name": "Одиночный заезд", "relative": "RU", "price": "2"},
{"id": "single", "name": "Одиночный заезд", "relative": "DE", "price": "3,5"},
{"id": "single", "name": "Одиночный заезд", "relative": "EE", "price": "4"},
{"id": "multi", "name": "Многоразовый заезд", "relative": "RU", "price": "5"},
{"id": "multi", "name": "Многоразовый заезд", "relative": "DE", "price": "4"},
{"id": "multi", "name": "Многоразовый заезд", "relative": "EE", "price": "3"},
{"id": "permanent", "name": "Постоянный заезд", "relative": "RU", "price": "2,5"},
{"id": "permanent", "name": "Постоянный заезд", "relative": "DE", "price": "1"},
{"id": "permanent", "name": "Постоянный заезд", "relative": "EE", "price": "5"},
],
"timespent": [
{"id": "fast", "name": "3 рабочих дня", "relative": "RU", "price": "5"},
{"id": "fast", "name": "3 рабочих дня", "relative": "DE", "price": "7"},
{"id": "fast", "name": "3 рабочих дня", "relative": "EE", "price": "9"},
{"id": "middle", "name": "10 рабочих дней", "relative": "RU", "price": "10,80"},
{"id": "middle", "name": "10 рабочих дней", "relative": "DE", "price": "15"},
{"id": "middle", "name": "10 рабочих дней", "relative": "EE", "price": "20"},
{"id": "slow", "name": "15-30 рабочих дней", "relative": "RU", "price": "15,70"},
{"id": "slow", "name": "15-30 рабочих дней", "relative": "DE", "price": "25"},
{"id": "slow", "name": "15-30 рабочих дней", "relative": "EE", "price": "35"},
],
}

В форме необходимо выводить данные в соответствии их отношению между друг другом.

Отношение есть у “Количество заездов” и у “Время обработки” к выбранной стране в ключе “relative”. По выбранным в форме параметрам необходимо посчитать стоимость и отобразить её в предназначенном для этого блоке шаблона формы.

На втором шаге формы:

Заполняются данные пользователя. Данные, выбранные на первом шаге, отображаются в специально предназначенном блоке формы.

Нужно учесть, чтобы при заполнении имени и фамилии они обновлялись в заголовке в таком формате:
Имя + Первая буква фамилии (Ivan I.)

image.png

В поле формы “Гражданство” можно добавить любые страны на ваше усмотрение.

При нажатии на кнопку “Готово” в консоль браузера должен выводиться JSON объект со всеми выбранными и введенными пользователем данными. Это такие поля как:

Имя
Фамилия
Дата рождения
Гражданство
Страна въезда
Тип визы
Въезд (дата)
Выезд (дата)
Количество заездов
Время обработки
Итоговая стоимость

Все возможные статусы стилей кнопок (hover, focus) и адаптивная версия на ваше усмотрение. Адаптив будет оцениваться по критериям: аккуратность выполнения, срабатывание ui элементов.
В первую очередь будет проверяться качество верстки, во вторую реализация на Vue.js
Результат тестового задания нужно загрузить на Github или отправить zip архивом проект.
На проект дается 3 дня, ожидается выполнение 8 марта к 23:00 по мск.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.