## Завдання
Ви створюєте веб-сторінку, яка відображає список порід собак та їхню інформацію, отриману з Dog API. Коли користувач натискає кнопку "Завантажити породи", дані повинні бути отримані з API, а інформація про породи (назва, опис і тривалість життя) має відображатися на сторінці. Обробіть можливі помилки та надайте зворотний зв'язок у HTML.

**Отримання даних з API**: Коли натиснута кнопка "Завантажити породи"
1.  Отримати дані з `https://dogapi.dog/api/v2/breeds`;
2. Розпарсити відповідь у форматі JSON;
3.  Якщо дані успішно отримані, перейти до наступного кроку;
4. Якщо під час отримання даних виникла помилка, відобразити `"Failed to load breeds. Please try again later."` у елементі `error-message`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbiBpZD0ibG9hZC1icmVlZHMiPkxvYWQgQnJlZWRzPC9idXR0b24+CiAgICA8cCBpZD0iZXJyb3ItbWVzc2FnZSI+PC9wPgogICAgPGRpdiBpZD0iYnJlZWQtY29udGFpbmVyIj48L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7CiAgcGFkZGluZzogMjBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4IDE4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjZmZmZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMzYjgyZjY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjU2M2ViOwp9CgojZXJyb3ItbWVzc2FnZSB7CiAgY29sb3I6ICNkYzI2MjY7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IC0xNXB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCiNicmVlZC1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA2MDBweDsKfQoKI2JyZWVkLWNvbnRhaW5lciBkaXYgewogIHBhZGRpbmc6IDIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMgZWFzZSwgYm94LXNoYWRvdyAwLjJzIGVhc2U7Cn0KCiNicmVlZC1jb250YWluZXIgZGl2OmhvdmVyIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTNweCk7CiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9CgojYnJlZWQtY29udGFpbmVyIGgzIHsKICBmb250LXNpemU6IDEuM3JlbTsKICBjb2xvcjogIzM3NDE1MTsKICBtYXJnaW46IDAgMCAxMHB4Owp9CgojYnJlZWQtY29udGFpbmVyIHAgewogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogIzRiNTU2MzsKICBtYXJnaW46IDVweCAwOwp9

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgX19fX18oX19fX18pCiAgICAudGhlbihyZXNwb25zZSA9PiB7CiAgICAgIGlmICghcmVzcG9uc2Uub2spIHsKICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ05ldHdvcmsgcmVzcG9uc2Ugd2FzIG5vdCBvaycpOwogICAgICB9CiAgICAgIHJldHVybiBfX19fXy5fX19fXygpOwogICAgfSkKICAgIC5fX19fXyhkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5fX19fXyhlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9ICdfX19fXyc7CiAgICAgIGNvbnNvbGUuZXJyb3IoJ0ZldGNoIGVycm9yOicsIGVycm9yKTsKICAgIH0pOwp9Cgpsb2FkQnJlZWRzQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZmV0Y2hCcmVlZHMpOw==

- Використовуйте `fetch('https://dogapi.dog/api/v2/breeds')` для отримання даних з `https://dogapi.dog/api/v2/breeds`;
- Використовуйте `response.json()` для парсингу відповіді у форматі JSON;
- Після парсингу даних у наступному блоці `then` викликайте функцію `displayBreeds` і передавайте як аргумент `data.data`;
- У блоці `catch` обробляйте можливі помилки.

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgZmV0Y2goJ2h0dHBzOi8vZG9nYXBpLmRvZy9hcGkvdjIvYnJlZWRzJykKICAgIC50aGVuKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKCFyZXNwb25zZS5vaykgewogICAgICAgIHRocm93IG5ldyBFcnJvcignTmV0d29yayByZXNwb25zZSB3YXMgbm90IG9rJyk7CiAgICAgIH0KICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24oKTsKICAgIH0pCiAgICAudGhlbihkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9CiAgICAgICAgJ0ZhaWxlZCB0byBsb2FkIGJyZWVkcy4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nOwogICAgICBjb25zb2xlLmVycm9yKCdGZXRjaCBlcnJvcjonLCBlcnJvcik7CiAgICB9KTsKfQoKbG9hZEJyZWVkc0J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZldGNoQnJlZWRzKTs=

Опануйте ключові концепції JavaScript, включаючи класи, маніпуляцію DOM, обробку подій та асинхронне програмування. Навчіться створювати динамічні та інтерактивні вебзастосунки шляхом керування взаємодією з користувачем, отримання та відображення даних, а також ефективної обробки асинхронних операцій. Завдяки поєднанню теорії, практичних завдань і реальних прикладів цей курс надає практичні навички, необхідні для сучасної веброзробки.

Вивчення основ класів JavaScript: від оголошення класів до визначення методів для розширення функціональності. Ознайомлення з ефективним використанням об'єктів параметрів, керування приватними властивостями та контролем доступу за допомогою геттерів і сеттерів. Засвоєння статичних властивостей і статичних методів, а також використання наслідування класів через "extends" і "super()" для створення масштабованого та багаторазового коду.

Оволодіння маніпулюванням DOM для створення динамічних, інтерактивних веб-застосунків. Навігація та зміна структури DOM, динамічне оновлення контенту, впровадження найкращих практик безпеки та продуктивності. Відмінності між властивостями та атрибутами для оптимізації коду.

Розкрийте інтерактивність вебзастосунків, опанувавши події JavaScript. Зрозумійте поширення подій, контроль поведінки подій та впровадження ефективної обробки подій для взаємодії з користувачем. Оптимізуйте продуктивність за допомогою розширених технік, таких як делегування подій.

Занурення в асинхронний JavaScript, включаючи зворотні виклики, Promises та async/await. Вивчення отримання даних з API, інтеграції сторонніх бібліотек та ефективної обробки кількох запитів, формування навичок для створення додатків, орієнтованих на дані.

Завдання: Отримання та Використання Даних API

Завдання