Homework 9 - Async & Fetch

[MZabolotnev]

Підготовка

Як зазвичай, початок розробки нової функціональності (нового завдання) відбувається з актуальної версії продакшена (гілка main).

1. Перемкніться на гілку main та завантажте найновішу версію з нашого репозиторію.
2. Заведіть нову гілку під назвою 9-async_<ім'я користувача github>.

Завдання

Вам потрібно переписати частину вашого проекту таким чином, щоб відображати картки ігор ( чи покемонів ), базуючись на реальних даних з АПІ. Моки данних більше не потрібні, замість них треба завантажувати реальні данні. Для цього потрібно послати GET запити із необхідними хедерами

Pokemon API : https://my-json-server.typicode.com/electrovladyslav/pokemon-json-server/pokemons хедери не потрібні

Games API: https://mmo-games.p.rapidapi.com/games

headers: {
        'X-RapidAPI-Key': '1c3169c707mshb51bff34cbc9ff6p1749b9jsn648a19134256',
        'X-RapidAPI-Host': 'mmo-games.p.rapidapi.com'
    }

Вимоги:

1. Після переходу на сторінку Games/Pokemons ви маєте робити запит до АПІ. Юзер має бачити що сторінка завантажується під час запиту. Весь інтерфейс при цьому не має буть заблокований. Можете використати просто текст Loading... по центру екрана. Або будь який спіннер з текстом, наприклад цей.
2. Після завантаження покажіть юзеру перші 50 карток із відповіді від АПІ. Скролл має бути вертикальним, а не горизонтальним.

Завдання з *

Реалізуйте фільтри та пошук. Видаляємо всі нерелевантні елементи інпуту: Що має бути реалізовано для ігор:

1. Select для вибору категоріі
2. Select для вибору платформи
3. Два radio для зміни сортування по даті релізу. Назвіть іх Old first та New First.
4. Пошук має шукати по назві в уже фільтрованому результаті по апі Для фільтрів ігор використовуйте query params. Перелік параметрів можна подивитися тут - https://www.mmobomb.com/api. Але запити треба робити на https://mmo-games.p.rapidapi.com/games

Для покемонів:

1. Select для вибору типу покемона. Зверніть увагу що типів може бути декілька для кожного.
2. Два radio для зміни сортування по зосту покемонів ( поле height ). Назвіть іх High first та Low First.
3. Пошук має відбуватись по відфільтрованим результатам. Сортування та пошук робіть програмно в коді.

[MZabolotnev]

Event loop videos: https://www.youtube.com/watch?v=8aGhZQkoFbQ https://www.youtube.com/watch?v=cCOL7MC4Pl0