Данное задание оплачивается как обычно, по вашему рейту, делается в продакшн и ориентировано на качество, хотя и является тестовым — в большей степени оно нацелено на поиск хорошего исполнителя для долгосрочного сотрудничества.
Существует элементарное API http://localhost:3000/api/79001234567 проверки сведений о телефонном номере, возвращающее следующую структуру данных откуда-то из Вселенной:
[
{
"id": "C5SMvTrAjPgX7Mjd",
"fields": {
"Phone": "79001234567",
"Messengers": [
"SMS"
],
"Status": "White",
"ID": 53,
"Name": "#white #53 +79001234567",
"WhatsApp": "<https://api.whatsapp.com/send?phone=79001234567>",
"phoneNumber": "79001234567",
"Notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis."
},
"createdTime": "2017-11-20T13:05:08.000Z"
},
{
"id": "ugr9JECv9fBTehaD",
"fields": {
"Phone": "79001234567",
"Messengers": [
"SMS",
"WhatsApp"
],
"Status": "Black",
"ID": 54,
"Name": "#white #54 +79001234567",
"WhatsApp": "<https://api.whatsapp.com/send?phone=79001234567>",
"phoneNumber": "79001234567",
"Notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis."
},
"createdTime": "2017-12-22T10:08:10.000Z"
}
]
Разработать пользовательский веб-интерфейс, представляющий из себя поле ввода телефонного номера и таблицу вывода полученной информации о нём.
Авторизация пользователя производится с помощью поля ввода пароля при первичном обращении к UI. Для авторизации используется ключевая фраза формата hairless-whale-clings, являющаяся токеном доступа к API.
В начальном состоянии UI представлен пустым полем ввода по центру ViewPort с плейсхолдером телефонного номера.
Пользователь вводит или вставляет из буфера обмена телефонный номер.
Символы не являющиеся цифрами игнорируются полем ввода.
UI выводит в реальном времени, по мере ввода телефонного номера (при числе цифр больше десяти), доступную о номере информацию. Поле съезжает вверх.
Кнопка TRY WHATSAPP используется пользователем для быстрого перехода в чат мессенджера по URL https://api.whatsapp.com/send?phone=INPUT_PHONE_NUMBER.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bfe3526e-28dd-4e52-8874-cc7551056a19/Untitled
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/086aa26d-bff9-45ff-b8f3-484893f29c4a/Untitled
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/775061f4-c650-42a2-8590-0784a670250f/Untitled
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dc56b1f0-c164-4ee8-b1fb-c31c44eef663/Untitled
На изображениях представлены wireframe основных состояний интерфейса.
Во всех текстах использован шрифт Roboto от Google Fonts с латинскими и кириллическими наборами символов.