Тестове завдання ✅
Мета: створити картки твітів та додати інтерактивності при клікові на кнопку.
- Верстка фіксована в
рх
, семантична та валідна. - Немає помилок в консолі браузера.
- Робота виконана на нативному
JS
з використанням зборщиків або наReact
. - Інтерактивність працює відповідно до технічного завдання.
- Код відформатований та без коментарів.
- В репозиторії має бути описаний
README.md
.
- Відповідно до макету потрібно реалізувати картки юзера.
- При клікові на кнопку
Follow
- текст змінюється наFollowing
. Також змінюється колір кнопки. А до кількості фоловерів додається і ваш. Тобто, початкова кількість складає 100,500 фоловерів. При клікові на кнопку буде 100,501. - При оновлені сторінки має фіксуватись кінцевий результат дій юзера. Тобто, якщо клікнути по кнопці і оновити сторінку - то кнопка все рівно залишається в стані
Following
із відповідним кольором, а кількість фоловерів НЕ зменшується до початкового значення. - При повторному клікові на кнопку її текст та колір змінюються до початкового стану. Також змінюється і кількість фоловерів. Вона зменшується на 1 (100,500).
- В коді цифра 100,500 має бути прописана одним значенням (100500). В UI - виведено через кому (100,500).
-
Створи свій персональний бекенд для розробки за допомогою UI-сервісу mockapi.io.
-
Зображення аватарів мають бути прописані окремими url у властивості “avatar”. Можете підібрати їх самостійно.
-
Має бути від 12 юзерів з різними значеннями(на ваш розсуд) в базі. Зроби пагінацію. На одній сторінці пагінації має відображатися від 3 твітів, решта підгружатись при натисканні Load More
-
Решта вимог аналогічні до вищеописаного технічного завдання.
-
Створюєте юзера в Mockapi з наступними полями:
id
,user
,tweets
,followers
,avatar
.
[
{
"id": "1",
"user": "User Full Name",
"tweets": 1234,
"followers": 100500,
"avatar": "url.jpg"
}
]
За виконання вам будуть нараховані додаткові бали! Без виконання додаткового завдання ви не зможете отримати максимальний бал.
Створи маршрутизацію, використовуючи React Router.
У застосунку повинні бути такі маршрути. Якщо користувач зайшов за неіснуючим маршрутом, його необхідно перенаправляти на домашню сторінку. '/'
– компонент Home
, домашня сторінка. Стилізація та оформлення на ваш розсуд '/tweets'
- компонент tweets
, сторінка із відображенням твітів На сторінці tweets
має бути кнопка Back
, яка веде на головну сторінку.
Додай фільтрацію. Це має бути Dropdown
із 3 опціями(оформлення на ваш розсуд): show all
, follow
, followings
.
Show All
- показати всі твіти.Follow
- показати твіти, у яких станFollow
.Followings
- показати твіти, у яких станFollowing
.