## Tâche
Création d'une page web affichant une liste de races de chiens et leurs informations récupérées depuis l'API Dog. Lorsqu'un utilisateur clique sur le bouton « Charger les races », les données doivent être récupérées depuis l'API, et les informations sur les races (nom, description et espérance de vie) doivent être affichées sur la page web. Gérer les éventuelles erreurs et fournir un retour d'information dans le HTML.

**Récupération des données depuis l'API** : Lors du clic sur le bouton « Charger les races »
1. Récupérer les données depuis `https://dogapi.dog/api/v2/breeds` ;
2. Analyser la réponse JSON ;
3. Si les données sont récupérées avec succès, passer à l'étape suivante ;
4. En cas d'erreur lors de la récupération des données, afficher `"Failed to load breeds. Please try again later."` dans l'élément `error-message`.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7CiAgcGFkZGluZzogMjBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4IDE4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjZmZmZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMzYjgyZjY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjU2M2ViOwp9CgojZXJyb3ItbWVzc2FnZSB7CiAgY29sb3I6ICNkYzI2MjY7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IC0xNXB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCiNicmVlZC1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA2MDBweDsKfQoKI2JyZWVkLWNvbnRhaW5lciBkaXYgewogIHBhZGRpbmc6IDIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMgZWFzZSwgYm94LXNoYWRvdyAwLjJzIGVhc2U7Cn0KCiNicmVlZC1jb250YWluZXIgZGl2OmhvdmVyIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTNweCk7CiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9CgojYnJlZWQtY29udGFpbmVyIGgzIHsKICBmb250LXNpemU6IDEuM3JlbTsKICBjb2xvcjogIzM3NDE1MTsKICBtYXJnaW46IDAgMCAxMHB4Owp9CgojYnJlZWQtY29udGFpbmVyIHAgewogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogIzRiNTU2MzsKICBtYXJnaW46IDVweCAwOwp9

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgX19fX18oX19fX18pCiAgICAudGhlbihyZXNwb25zZSA9PiB7CiAgICAgIGlmICghcmVzcG9uc2Uub2spIHsKICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ05ldHdvcmsgcmVzcG9uc2Ugd2FzIG5vdCBvaycpOwogICAgICB9CiAgICAgIHJldHVybiBfX19fXy5fX19fXygpOwogICAgfSkKICAgIC5fX19fXyhkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5fX19fXyhlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9ICdfX19fXyc7CiAgICAgIGNvbnNvbGUuZXJyb3IoJ0ZldGNoIGVycm9yOicsIGVycm9yKTsKICAgIH0pOwp9Cgpsb2FkQnJlZWRzQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZmV0Y2hCcmVlZHMpOw==

- Utiliser `fetch('https://dogapi.dog/api/v2/breeds')` pour récupérer les données depuis `https://dogapi.dog/api/v2/breeds` ;
- Utiliser `response.json()` pour analyser la réponse JSON ;
- Après l'analyse des données dans le bloc `then` suivant, appeler la fonction `displayBreeds` et fournir `data.data` en argument ;
- Dans le bloc `catch`, gérer les éventuelles erreurs.

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgZmV0Y2goJ2h0dHBzOi8vZG9nYXBpLmRvZy9hcGkvdjIvYnJlZWRzJykKICAgIC50aGVuKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKCFyZXNwb25zZS5vaykgewogICAgICAgIHRocm93IG5ldyBFcnJvcignTmV0d29yayByZXNwb25zZSB3YXMgbm90IG9rJyk7CiAgICAgIH0KICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24oKTsKICAgIH0pCiAgICAudGhlbihkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9CiAgICAgICAgJ0ZhaWxlZCB0byBsb2FkIGJyZWVkcy4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nOwogICAgICBjb25zb2xlLmVycm9yKCdGZXRjaCBlcnJvcjonLCBlcnJvcik7CiAgICB9KTsKfQoKbG9hZEJyZWVkc0J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZldGNoQnJlZWRzKTs=

Maîtrisez les concepts essentiels de JavaScript, notamment les classes, la manipulation du DOM, la gestion des événements et la programmation asynchrone. Acquérez la capacité de créer des applications web dynamiques et interactives en gérant les interactions utilisateur, en récupérant et affichant des données, et en traitant efficacement les opérations asynchrones. Grâce à un équilibre entre théorie, exercices pratiques et exemples concrets, ce cours vous dote des compétences pratiques nécessaires au développement web moderne.

Apprenez les fondamentaux des classes JavaScript, des déclarations de classes à la définition de méthodes qui améliorent la fonctionnalité. Découvrez comment utiliser efficacement les objets de paramètres, gérer les propriétés privées et contrôler l'accès avec les accesseurs et mutateurs. Maîtrisez les propriétés et méthodes statiques et exploitez la puissance de l'héritage de classes à l'aide de "extends" et "super()" pour créer un code évolutif et réutilisable.

Maîtrise de la manipulation du DOM pour créer des applications web dynamiques et interactives. Navigation et modification de la structure du DOM, mise à jour dynamique du contenu, mise en œuvre des meilleures pratiques en matière de sécurité et de performance. Différenciation entre propriétés et attributs pour optimiser le code.

Débloquez l'interactivité de vos applications web en maîtrisant les événements JavaScript. Comprenez la propagation des événements, contrôlez le comportement des événements et mettez en œuvre une gestion efficace des événements pour les interactions utilisateur. Optimisez les performances grâce à des techniques avancées telles que la délégation d'événements.

Approfondissement du JavaScript asynchrone, y compris les callbacks, les Promesses et async/await. Acquisition des compétences pour récupérer des données depuis des API, intégrer des bibliothèques tierces et gérer efficacement plusieurs requêtes, afin de développer des applications orientées données.

Défi : Récupérer et Utiliser des Données d'API

Tâche

Awesome!

Défi : Récupérer et Utiliser des Données d'API

Tâche