vladimirseoadv / vue-login-app Goto Github PK

Для выполнения тестового задания требуются: Vue.js (допускается установка через CDN или однофайловый компонент .vue + npm + Webpack)

1. На главной странице необходимо вывести форму входа с такими полями: Username, Phone number и кнопку Login. https://www.figma.com/file/W2bnVQFR9WlO9binpr9AAO/Vue-task?type=design&node-id=1%3A2&mode=design&t=3JQIa7NQAFuFyAG3-1 Поле username - буквенное (валидация ввода только буквы) Поле Phone number - пропускает числа и символы. После того как пользователь заполнил поля и нажал кнопку Login, происходит следующее: перебираем массив по ссылке - https://jsonplaceholder.typicode.com/users и прорабатываем два сценария :

1.1) Если введенные username и Phone number - совпадают у юзера - редиректим его на следующую страницу описанную в пункте 2 1.2) Если введен ные username и Phone number - не совпадают у юзера - выдаем ошибку (можно просто login error )

2. Если регистрация прошла успешно , то пользователь попадает на страницу, на которой : Вверху необходимо вывести персональные данные юзера из JSON файла - https://jsonplaceholder.typicode.com/users

На странице необходимо : Продемонстрировать умение работать с массивом данных(Todo list), полученных с помощью REST API в приложении на Vue.js Ссылка на REST API https://jsonplaceholder.typicode.com/todos Набор стилей CSS - адаптивный, желательно использовать Flexbox и/или CSS Grid Расположение элементов на странице - произвольное Нужно реализовать: 1.Получение данных (JSON) из REST API и вывод их всех на страницу в виде списка 2.Фильтрация данных полученных из API(данные выводятся согласно выбранных опций):

• Создать фильтры по свойствам: select-ы с опциями (All, Completed, Uncompleted, Favorites и тд..)
• Фильтр по ID юзера:select с опциями в виде цифр (userId из списка задач) и опция All Users 3.Поиск по ключу title. input, в который при вводе текста, выполняется поиск задач согласно выбранных фильтров и значения этого input 4.На странице добавить⭐ блок "Create todo", в нем: 2 поля input(User ID и Title) и кнопка Add (После успешного создания добавляем в массив todo) 5.Реализовать возможность добавить Todo в избранное, хранить его id в localStorage