## Uppgift
Du bygger en webbsida som visar en lista över hundraser och deras information hämtad från Dog API. När användaren klickar på knappen "Ladda raser" ska data hämtas från API:et och information om raserna (namn, beskrivning och livslängd) visas på webbsidan. Hantera eventuella fel och ge återkoppling i HTML-koden.

**Hämta data från API**: När knappen "Ladda raser" klickas
1. Hämta data från `https://dogapi.dog/api/v2/breeds`;
2. Tolka JSON-svaret;
3. Om data hämtas framgångsrikt, gå vidare till nästa steg;
4. Om ett fel uppstår vid hämtning av data, visa `"Failed to load breeds. Please try again later."` i elementet `error-message`.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7CiAgcGFkZGluZzogMjBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4IDE4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjZmZmZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMzYjgyZjY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjU2M2ViOwp9CgojZXJyb3ItbWVzc2FnZSB7CiAgY29sb3I6ICNkYzI2MjY7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IC0xNXB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCiNicmVlZC1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA2MDBweDsKfQoKI2JyZWVkLWNvbnRhaW5lciBkaXYgewogIHBhZGRpbmc6IDIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMgZWFzZSwgYm94LXNoYWRvdyAwLjJzIGVhc2U7Cn0KCiNicmVlZC1jb250YWluZXIgZGl2OmhvdmVyIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTNweCk7CiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9CgojYnJlZWQtY29udGFpbmVyIGgzIHsKICBmb250LXNpemU6IDEuM3JlbTsKICBjb2xvcjogIzM3NDE1MTsKICBtYXJnaW46IDAgMCAxMHB4Owp9CgojYnJlZWQtY29udGFpbmVyIHAgewogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogIzRiNTU2MzsKICBtYXJnaW46IDVweCAwOwp9

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgX19fX18oX19fX18pCiAgICAudGhlbihyZXNwb25zZSA9PiB7CiAgICAgIGlmICghcmVzcG9uc2Uub2spIHsKICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ05ldHdvcmsgcmVzcG9uc2Ugd2FzIG5vdCBvaycpOwogICAgICB9CiAgICAgIHJldHVybiBfX19fXy5fX19fXygpOwogICAgfSkKICAgIC5fX19fXyhkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5fX19fXyhlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9ICdfX19fXyc7CiAgICAgIGNvbnNvbGUuZXJyb3IoJ0ZldGNoIGVycm9yOicsIGVycm9yKTsKICAgIH0pOwp9Cgpsb2FkQnJlZWRzQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZmV0Y2hCcmVlZHMpOw==

- Använd `fetch('https://dogapi.dog/api/v2/breeds')` för att hämta data från `https://dogapi.dog/api/v2/breeds`;
- Använd `response.json()` för att tolka JSON-svaret;
- Efter tolkning av data i följande `then`-block, anropa funktionen `displayBreeds` och skicka `data.data` som argument;
- Hantera eventuella fel i `catch`-blocket.

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgZmV0Y2goJ2h0dHBzOi8vZG9nYXBpLmRvZy9hcGkvdjIvYnJlZWRzJykKICAgIC50aGVuKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKCFyZXNwb25zZS5vaykgewogICAgICAgIHRocm93IG5ldyBFcnJvcignTmV0d29yayByZXNwb25zZSB3YXMgbm90IG9rJyk7CiAgICAgIH0KICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24oKTsKICAgIH0pCiAgICAudGhlbihkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9CiAgICAgICAgJ0ZhaWxlZCB0byBsb2FkIGJyZWVkcy4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nOwogICAgICBjb25zb2xlLmVycm9yKCdGZXRjaCBlcnJvcjonLCBlcnJvcik7CiAgICB9KTsKfQoKbG9hZEJyZWVkc0J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZldGNoQnJlZWRzKTs=

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

Lär dig grunderna i JavaScript-klasser, från klassdeklarationer till att definiera metoder som förbättrar funktionaliteten. Upptäck hur du använder parameterobjekt effektivt, hanterar privata egenskaper och kontrollerar åtkomst med getters och setters. Behärska statiska egenskaper och statiska metoder samt utnyttja kraften i klassarv med "extends" och "super()" för att skapa skalbar och återanvändbar kod.

Behärska DOM-manipulation för att skapa dynamiska, interaktiva webbapplikationer. Navigera och modifiera DOM-strukturen, uppdatera innehåll dynamiskt och tillämpa bästa praxis för säkerhet och prestanda. Skilj mellan egenskaper och attribut för att optimera din kod.

Lås upp interaktiviteten i dina webbapplikationer genom att bemästra JavaScript-händelser. Förstå händelsepropagering, kontrollera händelsebeteende och implementera effektiv händelsehantering för användarinteraktioner. Optimera prestanda med avancerade tekniker som händelsedelegering.

Fördjupa dig i asynkron JavaScript, inklusive återanrop, löften och async/await. Lär dig att hämta data från API:er, integrera tredjepartsbibliotek och hantera flera förfrågningar effektivt, vilket bygger färdigheter för att skapa datadrivna applikationer.

Utmaning: Hämta och Använd API-data

Uppgift

Awesome!

Utmaning: Hämta och Använd API-data

Uppgift