## Compito
Si sta realizzando una pagina web che mostra un elenco di razze canine e le relative informazioni recuperate dal Dog API. Quando l’utente clicca sul pulsante "Carica Razze", i dati devono essere recuperati dall’API e le informazioni sulla razza (nome, descrizione e durata della vita) devono essere visualizzate sulla pagina web. Gestire eventuali errori e fornire un riscontro nell’HTML.

**Recupero dati dall’API**: Quando viene cliccato il pulsante "Carica Razze"
1. Recuperare i dati da `https://dogapi.dog/api/v2/breeds`;
2. Analizzare la risposta JSON;
3. Se i dati vengono recuperati con successo, procedere al passaggio successivo;
4. Se si verifica un errore durante il recupero dei dati, visualizzare `"Failed to load breeds. Please try again later."` nell’elemento `error-message`.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtYXJnaW46IDA7CiAgY29sb3I6ICMzMzM7CiAgcGFkZGluZzogMjBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4IDE4cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjZmZmZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMzYjgyZjY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLWJvdHRvbTogMjBweDsKfQoKYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjU2M2ViOwp9CgojZXJyb3ItbWVzc2FnZSB7CiAgY29sb3I6ICNkYzI2MjY7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IC0xNXB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCiNicmVlZC1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7CiAgd2lkdGg6IDEwMCU7CiAgbWF4LXdpZHRoOiA2MDBweDsKfQoKI2JyZWVkLWNvbnRhaW5lciBkaXYgewogIHBhZGRpbmc6IDIwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMnMgZWFzZSwgYm94LXNoYWRvdyAwLjJzIGVhc2U7Cn0KCiNicmVlZC1jb250YWluZXIgZGl2OmhvdmVyIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTNweCk7CiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTUpOwp9CgojYnJlZWQtY29udGFpbmVyIGgzIHsKICBmb250LXNpemU6IDEuM3JlbTsKICBjb2xvcjogIzM3NDE1MTsKICBtYXJnaW46IDAgMCAxMHB4Owp9CgojYnJlZWQtY29udGFpbmVyIHAgewogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogIzRiNTU2MzsKICBtYXJnaW46IDVweCAwOwp9

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgX19fX18oX19fX18pCiAgICAudGhlbihyZXNwb25zZSA9PiB7CiAgICAgIGlmICghcmVzcG9uc2Uub2spIHsKICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ05ldHdvcmsgcmVzcG9uc2Ugd2FzIG5vdCBvaycpOwogICAgICB9CiAgICAgIHJldHVybiBfX19fXy5fX19fXygpOwogICAgfSkKICAgIC5fX19fXyhkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5fX19fXyhlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9ICdfX19fXyc7CiAgICAgIGNvbnNvbGUuZXJyb3IoJ0ZldGNoIGVycm9yOicsIGVycm9yKTsKICAgIH0pOwp9Cgpsb2FkQnJlZWRzQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZmV0Y2hCcmVlZHMpOw==

- Utilizzare `fetch('https://dogapi.dog/api/v2/breeds')` per recuperare i dati da `https://dogapi.dog/api/v2/breeds`;
- Utilizzare `response.json()` per analizzare la risposta JSON;
- Dopo aver analizzato i dati nel successivo blocco `then`, chiamare la funzione `displayBreeds` e fornire `data.data` come argomento;
- Nel blocco `catch`, gestire eventuali errori.

Y29uc3QgbG9hZEJyZWVkc0J1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsb2FkLWJyZWVkcycpOwpjb25zdCBicmVlZENvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdicmVlZC1jb250YWluZXInKTsKY29uc3QgZXJyb3JNZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Vycm9yLW1lc3NhZ2UnKTsKCmZ1bmN0aW9uIGRpc3BsYXlCcmVlZHMoYnJlZWRzKSB7CiAgYnJlZWRzLmZvckVhY2goYnJlZWQgPT4gewogICAgY29uc3QgYnJlZWREaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgIGNvbnN0IGJyZWVkTmFtZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2gzJyk7CiAgICBjb25zdCBicmVlZERlc2NyaXB0aW9uID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOwogICAgY29uc3QgYnJlZWRMaWZlU3BhbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3AnKTsKCiAgICBicmVlZE5hbWUudGV4dENvbnRlbnQgPSBicmVlZC5hdHRyaWJ1dGVzLm5hbWU7CiAgICBicmVlZERlc2NyaXB0aW9uLnRleHRDb250ZW50ID0gYnJlZWQuYXR0cmlidXRlcy5kZXNjcmlwdGlvbjsKICAgIGJyZWVkTGlmZVNwYW4udGV4dENvbnRlbnQgPSBgTGlmZSBTcGFuOiAke2JyZWVkLmF0dHJpYnV0ZXMubGlmZS5taW59LSR7YnJlZWQuYXR0cmlidXRlcy5saWZlLm1heH0geWVhcnNgOwoKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTmFtZSk7CiAgICBicmVlZERpdi5hcHBlbmRDaGlsZChicmVlZERlc2NyaXB0aW9uKTsKICAgIGJyZWVkRGl2LmFwcGVuZENoaWxkKGJyZWVkTGlmZVNwYW4pOwogICAgYnJlZWRDb250YWluZXIuYXBwZW5kQ2hpbGQoYnJlZWREaXYpOwogIH0pOwp9CgpmdW5jdGlvbiBmZXRjaEJyZWVkcygpIHsKICBlcnJvck1lc3NhZ2UudGV4dENvbnRlbnQgPSAnJzsKICBicmVlZENvbnRhaW5lci5pbm5lckhUTUwgPSAnJzsKCiAgZmV0Y2goJ2h0dHBzOi8vZG9nYXBpLmRvZy9hcGkvdjIvYnJlZWRzJykKICAgIC50aGVuKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKCFyZXNwb25zZS5vaykgewogICAgICAgIHRocm93IG5ldyBFcnJvcignTmV0d29yayByZXNwb25zZSB3YXMgbm90IG9rJyk7CiAgICAgIH0KICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24oKTsKICAgIH0pCiAgICAudGhlbihkYXRhID0+IHsKICAgICAgZGlzcGxheUJyZWVkcyhkYXRhLmRhdGEpOwogICAgfSkKICAgIC5jYXRjaChlcnJvciA9PiB7CiAgICAgIGVycm9yTWVzc2FnZS50ZXh0Q29udGVudCA9CiAgICAgICAgJ0ZhaWxlZCB0byBsb2FkIGJyZWVkcy4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nOwogICAgICBjb25zb2xlLmVycm9yKCdGZXRjaCBlcnJvcjonLCBlcnJvcik7CiAgICB9KTsKfQoKbG9hZEJyZWVkc0J1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZldGNoQnJlZWRzKTs=

Padroneggia i concetti fondamentali di JavaScript, inclusi classi, manipolazione del DOM, gestione degli eventi e programmazione asincrona. Acquisisci le competenze per creare applicazioni web dinamiche e interattive gestendo le interazioni utente, recuperando e visualizzando dati e gestendo operazioni asincrone in modo efficiente. Attraverso una combinazione di teoria, esercitazioni pratiche ed esempi reali, questo corso fornisce le competenze pratiche necessarie per lo sviluppo web moderno.

Apprendimento dei fondamenti delle classi in JavaScript, dalle dichiarazioni di classe alla definizione di metodi che ne migliorano la funzionalità.
Esplorazione dell'uso efficace degli oggetti parametro, gestione delle proprietà private e controllo dell'accesso tramite getter e setter.
Padronanza delle proprietà statiche e dei metodi statici, oltre allo sfruttamento dell'ereditarietà delle classi tramite "extends" e "super()" per sviluppare codice scalabile e riutilizzabile.

Padronanza della manipolazione del DOM per creare applicazioni web dinamiche e interattive. Navigazione e modifica della struttura del DOM, aggiornamento dinamico dei contenuti e implementazione delle migliori pratiche per sicurezza e prestazioni. Distinzione tra proprietà e attributi per ottimizzare il codice.

Sblocca l'interattività delle tue applicazioni web padroneggiando gli eventi JavaScript. Comprendi la propagazione degli eventi, controlla il comportamento degli eventi e implementa una gestione efficiente degli eventi per le interazioni utente. Ottimizza le prestazioni con tecniche avanzate come la delega degli eventi.

Approfondimento su JavaScript asincrono, inclusi callback, Promises e async/await. Studio delle tecniche per recuperare dati da API, integrare librerie di terze parti e gestire più richieste in modo efficiente, sviluppando competenze per la creazione di applicazioni basate sui dati.

Sfida: Recuperare e Utilizzare Dati API

Compito

Awesome!

Sfida: Recuperare e Utilizzare Dati API

Compito