User must enter names of his friends followed by comma and blank space
For example:
- Dana 👧, Michael
, Robert 👦, Celine 👰♀️
When he finished this input(the number of names is not set hard, that is, the user can enter 3 or 5 names. In this case, the grid structure is preserved: aligning to the left), he click Enter key, and we get cards of his friends below with such info: photo, name, short description
Cards and input (with label, see below) must have attractive UI
Examples of UI:
You can choose photos and remote resource as you wish (e. g. Flickr, Unsplash and so on)
Layout of cards must be 2 x 2 (no matter how many friends you entered - odd or even number). See an example the most below(pic. 1) 👇
Extra task:
Implement drag-and-drop. When capturing and dragging a card, the card is moved to the place where it happened to drop to the place of the captured card. The captured card in turn takes the place of the target. For example, if the first one is selected and it is released into place by the fourth, then they change places (the 4th card rises in place of the 1st, and the 1st card takes the place of the 4th)
Пользователь вводит в поле инпута имена своих друзей через запятую и пробел.
Пример:
- Катя 👰♀️, Тоня 👧, Вася 👦, Петя
Как только все имена введены(количество имён задано не жёстко, то есть, пользователь может ввести и 3 и 5 имён. При этом структура сетки сохраняется: выравнивание по левому краю), пользователь может нажать клавишу Enter, и ниже выводятся карточки его друзей со следующей информацией: фото, имя, краткое описание.
Оформление карточек и инпута(с иконкой 👤) обязательно
Примеры оформления можно посмотреть здесь:
Фотографии выбираются произвольно со стороннего ресурса (ресурс выбирается самостоятельно. Например, Flickr, Unsplash и т. д.).
Само расположение карточек по сетке 2 х 2 (если было введено нечётное количество друзей, то сетка остаётся):
pic. 1
┌-------------┐ ┌-------------┐
| | | |
| photo | | photo |
|-------------| |-------------|
| name | | name |
|-------------| |-------------|
| descr | | descr |
| | | |
└-------------┘ └-------------┘
┌-------------┐ ┌-------------┐
| | | |
| photo | | photo |
|-------------| |-------------|
| name | | name |
|-------------| |-------------|
| descr | | descr |
| | | |
└-------------┘ └-------------┘
Дополнительное задание:
Реализовать drag-and-drop. При захвате и перетаскивании какой-либо карточки происходит взаимное перемещение той карточки на которую произошёл drop на место захваченной. Захваченная карточкая в свою очередь занимает место целевой. Например, если выбрана первая и происходит её отпускание на место четвёртой, то они меняются местами(4-ая карточка встаёт на место 1-ой, и 1-ая - на место 4-ой).