BSA | DOM API / Browser API

Task

Створити сторінку на якій відобразити список персонажів у вигляді карток, де кожна картка складається з імені персонажа, картинки, раси персонажа, останньої відомої локалізації, дати створення і списку епізодів.

Надати можливість сортування персонажів за датою - спадання і зростання; і за кількістю епізодів - вище в списку розташуються ті, у яких найбільше епізодів. Якщо персонажі мають однакову кількість епізодів, тоді їх між собою потрібно сортувати за датою. Критерієм успішно виконаного сортування за кількістю епізодів є те, що останні додані персонажі з найбільшою кількістю епізодів розміщуються у верхній частині списку.

На сторінці відобразити 10 персонажів і як тільки користувач доскролить до 10-го додати ще 10. Надати можливість повернутися до початкового стану - на сторінці тільки 10 персонажів.

Надати можливість видаляти персонажів зі списку. Видалені персонажі не повинні з’являтися в списку до повного перезавантаження сторінки.

Опціонально. Реалізувати пошук персонажів. Пошук повинен бути миттєвим, тобто при кожному введені символа в поле пошуку - відображати тих, в заголовку яких є слово що шукається.

Завантажити всіх персонажів з цього JSON файла на етапі завантаження сторінки використовуючи XMLHttpRequest або fetch. Для цього використовуйте код нижче:

const url = 'https://rickandmortyapi.com/api/character'; fetch(url) .then(res => res.json()) .then(data => { const rawData = data.results; return rawData.map(character => { //all needed data is listed below as an entity let created = character.created; let species = character.species ; let img = character.image; let episodes = character.episode; let name = character.name; let location = character.location; //create element //append element }); }) .catch((error) => { console.log(JSON.stringify(error)); }); Використання будь яких додаткових бібліотек для роботи з DOM елементами (до прикладу jQuery) - ЗАБОРОНЕНО.