Тестовое задание для компании Alef Development

Веб-приложение, написанное на Vue 3 (Options API), где пользователь может заполнить информацию о себе и своих детях.

Просмотр на Netify: https://ephemeral-frangollo-c3cb8f.netlify.app

Структура

• Задание
• Стек
• Развертывание
• Материалы

Задание

1. Блок персональных данных пользователя:

• Поле для ввода ФИО пользователя;
• Поле для ввода возраста пользователя.

2. Блок информации о детях пользователя:

• Изначально, пользователь видит только кнопку "+", предназначенную для добавления информации о ребенке;
• При нажатии на кнопку "+", появляется блок с полями для ввода информации о ребенке, включая имя и возраст;
• Пользователь может добавить информацию о до 5 детях. Когда пользователь добавил 5 детей, кнопка "+" исчезает и больше недоступна;
• Для каждого ребенка должна быть доступна кнопка "удалить", при нажатии на которую соответствующая запись удаляется.

3. Figma макет.

Стек

Приложение разработано на связке Vue 3 + Vite.
Для реализации маршрутизации использовался Vue Router.

Развертывание

Для локального запуска веб-приложения необходим:

• npm >= 5.5.0
• node >= 12.0

Клонирование

git clone https://github.com/Benrise/Alef-Test.git

Установка

npm install

Запуск

npm run dev

Note:
В случае возникновения возможных ошибок при установке модуля "node-sass", рекомендуется выполнить:

npm uninstall node-sass
npm install --save-dev sass

Сборка

npm run build

Материалы

Скриншоты созданного веб-приложения:

Страница "Форма"

Страница "Превью"

Страница "Форма" (пустое состояние)

Страница "Превью" (пустое состояние)