## Opgave
Du udvikler en webside, der viser en liste over hunderacer og deres information hentet fra Dog API. Når brugeren klikker på "Indlæs racer"-knappen, skal data hentes fra API'et, og information om racerne (navn, beskrivelse og levetid) skal vises på websiden. Håndter eventuelle fejl og giv feedback i HTML'en.

**Hent data fra API**: Når "Indlæs racer"-knappen klikkes
1. Hent data fra `https://dogapi.dog/api/v2/breeds`;
2. Pars JSON-svaret;
3. Hvis dataene hentes korrekt, fortsæt til næste trin;
4. Hvis der opstår en fejl under hentning af data, vis `"Failed to load breeds. Please try again later."` i elementet `error-message`.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7CiAgcGFkZGluZzogMjBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4IDE4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjZmZmZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMzYjgyZjY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjU2M2ViOwp9CgojZXJyb3ItbWVzc2FnZSB7CiAgY29sb3I6ICNkYzI2MjY7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IC0xNXB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCiNicmVlZC1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA2MDBweDsKfQoKI2JyZWVkLWNvbnRhaW5lciBkaXYgewogIHBhZGRpbmc6IDIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMgZWFzZSwgYm94LXNoYWRvdyAwLjJzIGVhc2U7Cn0KCiNicmVlZC1jb250YWluZXIgZGl2OmhvdmVyIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTNweCk7CiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9CgojYnJlZWQtY29udGFpbmVyIGgzIHsKICBmb250LXNpemU6IDEuM3JlbTsKICBjb2xvcjogIzM3NDE1MTsKICBtYXJnaW46IDAgMCAxMHB4Owp9CgojYnJlZWQtY29udGFpbmVyIHAgewogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogIzRiNTU2MzsKICBtYXJnaW46IDVweCAwOwp9

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgX19fX18oX19fX18pCiAgICAudGhlbihyZXNwb25zZSA9PiB7CiAgICAgIGlmICghcmVzcG9uc2Uub2spIHsKICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ05ldHdvcmsgcmVzcG9uc2Ugd2FzIG5vdCBvaycpOwogICAgICB9CiAgICAgIHJldHVybiBfX19fXy5fX19fXygpOwogICAgfSkKICAgIC5fX19fXyhkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5fX19fXyhlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9ICdfX19fXyc7CiAgICAgIGNvbnNvbGUuZXJyb3IoJ0ZldGNoIGVycm9yOicsIGVycm9yKTsKICAgIH0pOwp9Cgpsb2FkQnJlZWRzQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZmV0Y2hCcmVlZHMpOw==

- Brug `fetch('https://dogapi.dog/api/v2/breeds')` til at hente data fra `https://dogapi.dog/api/v2/breeds`;
- Brug `response.json()` til at parse JSON-svaret;
- Efter parsing af data i den følgende `then`-blok, kald funktionen `displayBreeds` og giv `data.data` som argument;
- I `catch`-blokken håndteres eventuelle fejl.

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgZmV0Y2goJ2h0dHBzOi8vZG9nYXBpLmRvZy9hcGkvdjIvYnJlZWRzJykKICAgIC50aGVuKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKCFyZXNwb25zZS5vaykgewogICAgICAgIHRocm93IG5ldyBFcnJvcignTmV0d29yayByZXNwb25zZSB3YXMgbm90IG9rJyk7CiAgICAgIH0KICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24oKTsKICAgIH0pCiAgICAudGhlbihkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9CiAgICAgICAgJ0ZhaWxlZCB0byBsb2FkIGJyZWVkcy4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nOwogICAgICBjb25zb2xlLmVycm9yKCdGZXRjaCBlcnJvcjonLCBlcnJvcik7CiAgICB9KTsKfQoKbG9hZEJyZWVkc0J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZldGNoQnJlZWRzKTs=

Behersk væsentlige JavaScript-koncepter, herunder klasser, DOM-manipulation, eventhåndtering og asynkron programmering. Lær at skabe dynamiske og interaktive webapplikationer ved at håndtere brugerinteraktioner, hente og vise data samt håndtere asynkrone operationer effektivt. Gennem en kombination af teori, praktiske udfordringer og virkelighedsnære eksempler giver dette kursus dig de praktiske færdigheder, der er nødvendige for moderne webudvikling.

Lær grundlæggende JavaScript-klasser, fra klassedeklarationer til definition af metoder, der udvider funktionaliteten. Opdag, hvordan parameterobjekter anvendes effektivt, håndtering af private egenskaber og adgangskontrol med getters og setters. Behersk statiske egenskaber og statiske metoder, og udnyt styrken ved klassearv ved brug af "extends" og "super()" til at opbygge skalerbar og genanvendelig kode.

Behersk DOM-manipulation for at skabe dynamiske, interaktive webapplikationer. Naviger og modificer DOM-strukturen, opdater indhold dynamisk, og implementer bedste praksis for sikkerhed og ydeevne. Skeln mellem egenskaber og attributter for at optimere din kode.

Lås op for interaktiviteten i dine webapplikationer ved at mestre JavaScript-hændelser. Forstå hændelsespropagering, kontroller hændelsesadfærd, og implementer effektiv hændelseshåndtering for brugerinteraktioner. Optimer ydeevnen med avancerede teknikker som hændelsesdelegering.

Dyk ned i asynkron JavaScript, herunder callbacks, Promises og async/await. Lær at hente data fra API'er, integrere tredjepartsbiblioteker og håndtere flere forespørgsler effektivt, hvilket opbygger færdigheder til at skabe datadrevne applikationer.

Udfordring: Hent og Brug API-Data

Opgave

Awesome!

Udfordring: Hent og Brug API-Data

Opgave