From e35e3ccc1ce74579a99cee6feb56f9d135ee74aa Mon Sep 17 00:00:00 2001 From: Berack96 Date: Fri, 20 Feb 2026 17:02:46 +0100 Subject: [PATCH] fix api --- .../11_API/01_get_singolo_utente/script.js | 43 +++--- .../11_API/02_get_lista_utenti/script.js | 93 +++++------ javascript/11_API/03_utente_e_post/script.js | 38 ++--- javascript/11_API/04_ricerca_post/script.js | 19 ++- javascript/11_API/05_todo_app_crud/script.js | 116 +++++++------- javascript/11_API/extra_meteo/script.js | 144 +++++++----------- javascript/11_API/extra_pokedex/script.js | 132 +++++++--------- 7 files changed, 262 insertions(+), 323 deletions(-) diff --git a/javascript/11_API/01_get_singolo_utente/script.js b/javascript/11_API/01_get_singolo_utente/script.js index aa5108a..a01d9b8 100644 --- a/javascript/11_API/01_get_singolo_utente/script.js +++ b/javascript/11_API/01_get_singolo_utente/script.js @@ -10,18 +10,8 @@ const btnFetch = document.querySelector('#btnFetch'); * FUNZIONE: Crea utente card * * Crea la card completa dell'utente e la inserisce nell'elemento result + * La struttura dell'oggetto user è visibile nella documentazione API. * Funzione già fatta - non modificare - * L'oggetto user ha questa struttura: - * { - * id: number, - * nome: string, - * cognome: string, - * email: string, - * avatar: string (url), - * dataNascita: string (formato YYYY-MM-DD), - * comune: string, - * attivo: boolean - * } */ function creaCardUtente(user) { result.innerHTML = ` @@ -58,12 +48,12 @@ function creaCardUtente(user) { * e logga l'errore in console (per debug) * Funzione già fatta - non modificare */ -function handleError(message) { +function mostraErrore(message) { console.error('Errore:', message); result.innerHTML = ` -
- ❌ ${message} -
+
+ ❌ ${message} +
`; } @@ -76,20 +66,21 @@ function handleError(message) { * fare una chiamata GET a BASE_URL + "/users/" + id e mostrare i dati * * Passi: - * 1. Leggi l'ID utente dall'input - * 2. Controlla che l'ID sia valido, ovvero un numero tra 1 e 40 - * In caso contrario, mostra un messaggio di errore (usa handleError()) e return - * 3. Mostra lo spinner di caricamento (rimuovi la classe nascosto) - * 4. Apri un blocco try/catch - * 5. Fai una fetch GET a /users/{id} - * 6. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return - * 7. Converti la risposta in JSON - * 8. Mostra i dati dell'utente chiamando creaCardUtente(user) - * 9. Nascondi lo spinner di caricamento (aggiungi la classe nascosto) + * 1. Leggi l'ID utente dall'input + * 2. Controlla che l'ID sia valido, ovvero un numero tra 1 e 40 + * In caso contrario, mostra un messaggio di errore (usa handleError()) e return + * 3. Mostra lo spinner di caricamento (rimuovi la classe nascosto) + * 4. Apri un blocco try/catch + * 5. Fai una fetch GET a /users/{id} + * 6. Se la risposta non è OK, lancia un errore con un messaggio che includa lo status code + * 7. Converti la risposta in JSON + * 8. Mostra i dati dell'utente chiamando creaCardUtente(user) + * 9. Nel catch, mostra un messaggio di errore usando handleError() e logga l'errore in console + * 10. Nascondi lo spinner di caricamento (aggiungi la classe nascosto) */ async function fetchUser() { // TODO Rimuovi questa riga e completa la funzione - handleError('Codice non implementato - Completa la funzione fetchUser()'); + mostraErrore('Codice non implementato - Completa la funzione fetchUser()'); } diff --git a/javascript/11_API/02_get_lista_utenti/script.js b/javascript/11_API/02_get_lista_utenti/script.js index 5abfed1..cef0cbc 100644 --- a/javascript/11_API/02_get_lista_utenti/script.js +++ b/javascript/11_API/02_get_lista_utenti/script.js @@ -5,23 +5,47 @@ const counter = document.querySelector('#counter'); const result = document.querySelector('#result'); const btnFetch = document.querySelector('#btnLoadUsers'); +/** + * Visualizza gli utenti in una griglia di card + * Funzione già fatta - non modificare + */ +function creaListaUtenti(users) { + if (!Array.isArray(users) || users.length === 0) { + mostraErrore('Nessun utente trovato'); + return; + } + + // CREA CARD PER OGNI UTENTE + const cardsHTML = users.map(user => creaCardUtente(user)).join(''); + result.innerHTML = cardsHTML; + + // MOSTRA CONTATORE + counter.innerHTML = `📊 Totale: ${users.length} utenti`; + counter.style.display = 'block'; +} + /** - * FUNZIONE che crea la card HTML per un singolo utente + * FUNZIONE che crea la stringa con la struttura HTML della card per un singolo utente + * Questa viene restituita a creaListaUtenti() per ogni utente e poi inserita nel DOM + * La struttura dell'oggetto user è visibile nella documentazione API. * * Passi: * 1. Crea un template literal con la struttura HTML della card - * 2. Usa i dati dell'oggetto user per popolare i campi - * 3. La struttura della card deve essere simile a questa: - *
- * Avatar - *
- *

Nome Cognome

- * - *

📍 comune

- *
Attivo/Inattivo
- *
- *
+ * La struttura della card deve essere simile a questa: + +
+ Avatar +
+

Nome Cognome

+ +

📍 comune

+
Attivo/Inattivo
+
+
+ + * 2. Sostituisci i valori con quelli dell'oggetto user passato come parametro: + * 3. Restituisci la stringa creata */ function creaCardUtente(user) { return ``; @@ -35,18 +59,13 @@ function creaCardUtente(user) { * e logga l'errore in console (per debug) * Funzione già fatta - non modificare */ -function handleError(message) { - result.innerHTML = ''; - - let div = document.createElement('div'); - div.className = 'error'; - - let strong = document.createElement('strong'); - strong.textContent = `❌ ${message}`; - - div.appendChild(strong); - result.appendChild(div); +function mostraErrore(message) { console.error('Errore:', message); + result.innerHTML = ` +
+ ❌ ${message} +
+ `; } @@ -57,35 +76,17 @@ function handleError(message) { * 1. Mostra lo spinner di caricamento (rimuovi la classe nascosto) * 2. Apri un blocco try/catch * 3. Fai una fetch GET a /users - * 4. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return + * 4. Se la risposta non è OK lancia un errore con un messaggio che includa lo status code * 5. Converti la risposta da stringa JSON a oggetto JavaScript - * 6. Mostra i dati degli utenti chiamando mostraUtenti(users) - * 7. Nascondi lo spinner di caricamento (aggiungi la classe nascosto) + * 6. Mostra i dati degli utenti chiamando creaListaUtenti(users) + * 7. Nel catch, mostra un messaggio di errore usando mostraErrore() + * 8. Nascondi lo spinner di caricamento (aggiungi la classe nascosto) */ async function fetchAllUsers() { // TODO Rimuovi questa riga e completa la funzione - handleError('Codice non implementato - Completa la funzione fetchAllUsers()'); + mostraErrore('Codice non implementato - Completa la funzione fetchAllUsers()'); } -/** - * Visualizza gli utenti in una griglia di card - * Funzione già fatta - non modificare - */ -function mostraUtenti(users) { - if (!Array.isArray(users) || users.length === 0) { - handleError('Nessun utente trovato'); - return; - } - - // CREA CARD PER OGNI UTENTE - const cardsHTML = users.map(user => creaCardUtente(user)).join(''); - result.innerHTML = cardsHTML; - - // MOSTRA CONTATORE - counter.innerHTML = `📊 Totale: ${users.length} utenti`; - counter.style.display = 'block'; -} - // COLLEGA IL BOTTONE btnFetch.addEventListener('click', fetchAllUsers); diff --git a/javascript/11_API/03_utente_e_post/script.js b/javascript/11_API/03_utente_e_post/script.js index d79304f..6c6c481 100644 --- a/javascript/11_API/03_utente_e_post/script.js +++ b/javascript/11_API/03_utente_e_post/script.js @@ -1,27 +1,18 @@ // ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️ const BASE_URL = 'http://localhost:5000/api'; -const userId = document.getElementById('userId'); -const loading = document.getElementById('loading'); -const userProfile = document.getElementById('userProfile'); -const postsContainer = document.getElementById('postsContainer'); -const btnFetch = document.getElementById('btnFetch'); +const userId = document.querySelector('#userId'); +const loading = document.querySelector('#loading'); +const userProfile = document.querySelector('#userProfile'); +const postsContainer = document.querySelector('#postsContainer'); +const btnFetch = document.querySelector('#btnFetch'); /** * FUNZIONE: Crea un utente card * * Crea la card completa dell'utente e la inserisce nell'elemento userProfile - * L'oggetto user ha questa struttura: - * { - * id: number, - * nome: string, - * cognome: string, - * email: string, - * avatar: string (url), - * dataNascita: string (formato YYYY-MM-DD), - * comune: string, - * attivo: boolean - * } + * La struttura dell'oggetto user è visibile nella documentazione API. + * Funzione già fatta - non modificare */ function creaCardUtente(user) { userProfile.innerHTML = ` @@ -90,13 +81,13 @@ function creaCardPosts(postList) { * * Mostra un messaggio di errore e logga in console */ -function handleError(message) { +function mostraErrore(message) { + console.error('Errore:', message); userProfile.innerHTML = `
❌ ${message}
`; - console.error('Errore:', message); } @@ -110,15 +101,16 @@ function handleError(message) { * 4. Apri un blocco try/catch * 5. Fai DUE fetch: * - GET /users/{id} - * - GET /posts - * 6. Filtra i post per trovare solo quelli di questo utente (usando userId) - * - Il filtro va fatto in JS, ma puoi anche usare un endpoint come /posts?userId={id} + * - GET /posts?userId={id} + * Nota che il secondo endpoint è un filtro: ti restituirà solo i post di quell'utente + * 6. Se una delle due risposte non è OK, lancia un errore con un messaggio che includa lo status code * 7. Mostra i risultati chiamando prima creaCardUtente(user) e poi creaCardPosts(posts) - * 8. Gestisci gli errori con handleError() + * 8. Nel catch, mostra un messaggio di errore usando mostraErrore() + * 9. Alla fine, nascondi lo spinner di caricamento */ async function fetchUserAndPosts() { // TODO Rimuovi questa riga e completa la funzione - handleError('Codice non implementato - Completa la funzione fetchUserAndPosts()'); + mostraErrore('Codice non implementato - Completa la funzione fetchUserAndPosts()'); } diff --git a/javascript/11_API/04_ricerca_post/script.js b/javascript/11_API/04_ricerca_post/script.js index 371df13..dc0f3f8 100644 --- a/javascript/11_API/04_ricerca_post/script.js +++ b/javascript/11_API/04_ricerca_post/script.js @@ -8,6 +8,9 @@ const btnSearch = document.querySelector('#btnSearch'); /** * FUNZIONE: Crea la card HTML per un singolo post con autore a fianco + * Prende un oggetto post e un oggetto autore e crea una card da inserire nei risultati + * La struttura dell'oggetto post è visibile nella documentazione API. + * La struttura dell'oggetto autore è visibile nella documentazione API. * * Funzione già fatta - non modificare */ @@ -40,13 +43,13 @@ function creaElementoPost(post, autore) { * Mostra un messaggio di errore e logga in console * Funzione già fatta - non modificare */ -function handleError(message) { +function mostraErrore(message) { + console.error('Errore:', message); results.innerHTML = `
❌ ${message}
`; - console.error('Errore:', message); } @@ -55,18 +58,18 @@ function handleError(message) { * * Devi completare questa funzione: * 1. Leggi la parola chiave dall'input - * 2. Svuota il contenuto dei risultati (results.innerHTML = '') - * 3. Valida che non sia vuota (usa trim) + * 2. Valida che non sia vuota (usa trim) + * 3. Svuota il contenuto dei risultati (results.innerHTML = '') * 4. Mostra lo spinner di caricamento * 5. Apri un blocco try/catch * 6. Fai una GET a /posts - * 7. Filtra i post dove titolo O contenuto contiene la keyword - * (ricorda minuscole per la ricerca) - * 8. Se nessun post trovato, usa handleError() e return + * 7. Filtra i post dove titolo contiene la keyword + * (ricorda minuscole per la ricerca in entrambe le stringhe) + * 8. Se nessun post trovato lancia un errore "Nessun post trovato" * 9. Per ogni post trovato: * - Prendi l'id autore e fai una GET a /users?id=[id] * - Crea un nuovo elemento della lista dei risultati con creaElementoPost(post, autore) - * 10. Gestisci gli errori con handleError() + * 10. Nel catch, mostra un messaggio di errore usando mostraErrore() * 11. Nascondi lo spinner di caricamento */ async function fetchPostsByKeyword() { diff --git a/javascript/11_API/05_todo_app_crud/script.js b/javascript/11_API/05_todo_app_crud/script.js index 65d6fc1..7cca7f3 100644 --- a/javascript/11_API/05_todo_app_crud/script.js +++ b/javascript/11_API/05_todo_app_crud/script.js @@ -13,12 +13,36 @@ const loading = document.querySelector('#loading'); const counter = document.querySelector('#counter'); - /** - * FUNZIONE: Crea la card HTML per tutti i TODO passati come parametro + * FUNZIONE: Visualizza i TODO nella pagina + * + * Prende in input un array di oggetti TODO (con struttura visibile nella documentazione API) + * e crea la lista dei TODO all'interno dell'elemento todosContainer. + * Ogni TODO mostra titolo, ID, e uno checkbox per completarlo. + * Se l'array è vuoto, mostra un messaggio "Nessun TODO. Creane uno!". + * Funzione già fatta - non modificare */ -function creaCardsTodos(todoList) { - allTodos = todoList.map((todo) => ` +function creaListaTodos(todos) { + + if (!Array.isArray(todos) || todos.length === 0) { + todosContainer.innerHTML = '
Nessun TODO. Creane uno!
'; + counter.classList.add('nascosto'); + return; + } + + // CONTA COMPLETATI E NON + const completed = todos.filter(t => t.completato).length; + const pending = todos.length - completed; + + // MOSTRA COUNTER + counter.innerHTML = ` + 📊 Totale: ${todos.length} | + ✅ Completati: ${completed} | + ⏳ In Sospeso: ${pending} + `; + counter.classList.remove('nascosto'); + + todosContainer.innerHTML = todos.map((todo) => `
🗑️ Elimina
`).join(''); - - todosContainer.innerHTML = allTodos; } - /** * FUNZIONE: Gestione errori * * Mostra un messaggio di errore e logga in console */ -function handleError(message) { +function mostraErrore(message) { + console.error('Errore:', message); todosContainer.innerHTML = `
❌ ${message}
`; - console.error('Errore:', message); } @@ -57,10 +78,10 @@ function handleError(message) { * ESERCIZIO 4: Todo App CRUD Completa * * Devi implementare 4 funzioni: - * 1. fetchTodosUtente() - GET /todos?userId={id} (READ) - * 2. addTodo() - POST /todos (CREATE) - * 3. toggleTodo() - PUT /todos/{id} (UPDATE) - * 4. deleteTodo() - DELETE /todos/{id} (DELETE) + * 1. fetchTodosUtente() - GET /todos?userId={id} (READ) + * 2. addTodo() - POST /todos (CREATE) + * 3. toggleTodo() - PUT /todos/{id} (UPDATE) + * 4. deleteTodo() - DELETE /todos/{id} (DELETE) * * BONUS (OPZIONALE): Persistenza con localStorage * Se hai completato tutte le funzioni, puoi aggiungere la persistenza dell'utente: @@ -82,15 +103,16 @@ let currentUserId = null; // Variabile globale per tenere traccia dell'ID utente * 3. Mostra lo spinner di caricamento * 4. Apri un blocco try/catch * 5. Fai una GET a /todos?userId={id} - * 6. Se non OK, mostra errore e return + * 6. Se non OK, lancia un errore con messaggio che include lo status code * 7. Converti la risposta in JSON * 8. Chiama displayTodos() per visualizzare - * 9. Nascondi lo spinner e mostra addTodoSection - * 10. Salva l'ID utente in currentUserId + * 9. Nel catch, mostra un messaggio di errore + * 10. Nascondi lo spinner e mostra addTodoSection + * 11. Salva l'ID utente nella variabile globale currentUserId */ async function fetchTodosUtente() { // TODO Rimuovi questa riga e completa la funzione - handleError('Codice non implementato - Completa la funzione fetchTodosUtente()'); + mostraErrore('Codice non implementato - Completa la funzione fetchTodosUtente()'); } @@ -98,16 +120,17 @@ async function fetchTodosUtente() { * FUNZIONE 2️⃣: Aggiungi TODO (POST) * * Passi: - * 1. Verifica che un utente sia stato caricato (currentUserId !== null) - * Altrimenti, mostra errore "Carica prima un utente!" e return - * 2. Leggi il testo dal campo di input del nuovo TODO - * 3. Valida con trim che non sia vuoto - * 4. Mostra lo spinner di caricamento - * 5. Apri un blocco try/catch - * 6. Fai una POST a /todos con body: {userId, titolo, completato: false} - * 7. Se non OK, mostra errore - * 8. Se OK, svuota l'input - * 9. Ricarica la lista chiamando fetchTodosUtente() + * 1. Verifica che un utente sia stato caricato (currentUserId !== null) + * Altrimenti, mostra errore "Carica prima un utente!" e return + * 2. Leggi il testo dal campo di input del nuovo TODO + * 3. Valida con trim che non sia vuoto + * 4. Mostra lo spinner di caricamento + * 5. Apri un blocco try/catch + * 6. Fai una POST a /todos con body: {userId, titolo, completato: false} + * 7. Se non OK, lancia un errore con messaggio che include lo status code + * 8. Se OK, svuota l'input e ricarica la lista chiamando fetchTodosUtente() + * 10. Nel catch, mostra un messaggio di errore + * 11. Nascondi lo spinner di caricamento */ async function addTodo() { } @@ -119,8 +142,9 @@ async function addTodo() { * Passi: * 1. Ricevi id e currentCompleted come parametri * 2. Fai una PUT a /todos/{id} con body: {completato: !currentCompleted} - * 3. Se non OK, mostra errore + * 3. Se non OK, lancia un errore con messaggio che include lo status code * 4. Se OK, ricarica la lista chiamando fetchTodosUtente() + * 5. Nel catch, mostra un messaggio di errore */ async function toggleTodo(id, currentCompleted) { } @@ -130,11 +154,10 @@ async function toggleTodo(id, currentCompleted) { * FUNZIONE 4️⃣: Elimina TODO (DELETE) * * Passi: - * 1. Chiedi conferma con confirm("Sicuro?") - * 2. Se l'utente cancella, return - * 3. Fai una DELETE a /todos/{id} - * 4. Se non OK, mostra errore - * 5. Se OK, ricarica la lista chiamando fetchTodosUtente() + * 1. Fai una DELETE a /todos/{id} + * 2. Se non OK, lancia un errore con messaggio che include lo status code + * 3. Se OK, ricarica la lista chiamando fetchTodosUtente() + * 4. Nel catch, mostra un messaggio di errore */ async function deleteTodo(id) { } @@ -164,33 +187,6 @@ async function deleteTodo(id) { */ -/** - * FUNZIONE: Visualizza i TODO - * Funzione già fatta - non modificare - */ -function displayTodos(todos) { - - if (!Array.isArray(todos) || todos.length === 0) { - todosContainer.innerHTML = '
Nessun TODO. Creane uno!
'; - counter.classList.add('nascosto'); - return; - } - - // CONTA COMPLETATI E NON - const completed = todos.filter(t => t.completato).length; - const pending = todos.length - completed; - - // MOSTRA COUNTER - counter.innerHTML = ` - 📊 Totale: ${todos.length} | - ✅ Completati: ${completed} | - ⏳ In Sospeso: ${pending} - `; - counter.classList.remove('nascosto'); - - creaCardsTodos(todos); -} - // ===== COLLEGA GLI EVENTI ===== btnLoadTodos.addEventListener('click', fetchTodosUtente); btnAddTodo.addEventListener('click', addTodo); diff --git a/javascript/11_API/extra_meteo/script.js b/javascript/11_API/extra_meteo/script.js index 6bb08bb..7f21c42 100644 --- a/javascript/11_API/extra_meteo/script.js +++ b/javascript/11_API/extra_meteo/script.js @@ -15,88 +15,6 @@ const loading = document.getElementById('loading'); const weatherContainer = document.getElementById('weatherContainer'); -/** - * FUNZIONE: Gestione errori - * - * Mostra un messaggio di errore e logga in console - */ -function handleError(message) { - weatherContainer.innerHTML = ` -
- ❌ ${message} -
- `; - console.error('Errore:', message); -} - - -/** - * FUNZIONE: Ricerca il meteo per latitudine e longitudine - * - * Parametri obbligatori dell'API: - * - latitude: numero decimale - * - longitude: numero decimale - * - current: variabili da ottenere (separati da virgola) - * - timezone: 'auto' oppure fuso orario specifico - * - * Passi: - * 1. Leggi latitudine e longitudine dagli input - * 2. Valida che siano compilati - * 3. Mostra lo spinner di caricamento - * 4. Costruisci l'URL con i parametri corretti - * 5. Fai una GET a https://api.open-meteo.com/v1/forecast - * 6. Se non OK, mostra errore e return - * 7. Converti in JSON - * 8. Estrai data.current - * 9. Chiama displayWeather() per visualizzare - * 10. Nascondi lo spinner - */ -async function searchWeather() { - const lat = latitude.value; - const lon = longitude.value; - - // VALIDAZIONE - if (!lat || !lon) { - handleError('Inserisci latitudine e longitudine'); - return; - } - - loading.classList.remove('nascosto'); - weatherContainer.innerHTML = ''; - - try { - // 👇 SCRIVI QUI IL TUO CODICE 👇 - - // 1. Costruisci l'URL con i parametri corretti: - // const url = 'https://api.open-meteo.com/v1/forecast' + - // '?latitude=' + lat + - // '&longitude=' + lon + - // '¤t=temperature_2m,relative_humidity_2m,weather_code' + - // '&timezone=auto'; - - // 2. Fai la fetch - // const response = await fetch(url); - - // 3. Se non OK, mostra errore e return - // if (!response.ok) { - // throw new Error('Errore nel caricamento dei dati meteo'); - // } - - // 4. Converti in JSON - // const data = await response.json(); - - // 5. Estrai i dati meteo e visualizza - // displayWeather(data.current, lat, lon); - - throw new Error('Codice non implementato - Completa searchWeather()'); - - } catch (error) { - handleError(error.message); - } finally { - loading.classList.add('nascosto'); - } -} - /** * FUNZIONE: Visualizza i dati meteo * (Questa funzione è già fatta - non modificare) @@ -122,7 +40,7 @@ function displayWeather(current, lat, lon) { const weather = weatherDescriptions[current.weather_code] || { emoji: '❓', descrizione: 'Sconosciuto' }; - const html = ` + weatherContainer.innerHTML = `
📍 ${lat.toFixed(2)}°N, ${lon.toFixed(2)}°E @@ -140,10 +58,66 @@ function displayWeather(current, lat, lon) {
`; - - weatherContainer.innerHTML = html; } +/** + * FUNZIONE: Gestione errori + * Mostra un messaggio di errore e logga in console + * Funzione già fatta - non modificare + */ +function mostraErrore(message) { + weatherContainer.innerHTML = ` +
+ ❌ ${message} +
+ `; + console.error('Errore:', message); +} + + +/** + * FUNZIONE: Ricerca il meteo per latitudine e longitudine + * + * Parametri obbligatori dell'API: + * - latitude: numero decimale + * - longitude: numero decimale + * - current: variabili da ottenere (separati da virgola) + * - timezone: 'auto' oppure fuso orario specifico + */ +async function searchWeather() { + const lat = latitude.value; + const lon = longitude.value; + + // VALIDAZIONE + if (!lat || !lon) { + mostraErrore('Inserisci latitudine e longitudine'); + return; + } + + loading.classList.remove('nascosto'); + weatherContainer.innerHTML = ''; + + try { + // 1. Costruisci l'URL `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,weather_code&timezone=auto` + + // 2. Fai la fetch + + // 3. Se non OK, lancia un errore con lo status code + + // 4. Converti in JSON + + // 5. Estrai i dati meteo e visualizza con displayWeather() + + throw new Error('Codice non implementato - Completa searchWeather()'); // Da Rimuovere + + } catch (error) { + mostraErrore(error.message); + } + + loading.classList.add('nascosto'); +} + + // ===== COLLEGA GLI EVENTI ===== btnSearch.addEventListener('click', searchWeather); diff --git a/javascript/11_API/extra_pokedex/script.js b/javascript/11_API/extra_pokedex/script.js index 522fabd..244cf4a 100644 --- a/javascript/11_API/extra_pokedex/script.js +++ b/javascript/11_API/extra_pokedex/script.js @@ -14,80 +14,10 @@ const loading = document.getElementById('loading'); const pokemonContainer = document.getElementById('pokemonContainer'); -/** - * FUNZIONE: Gestione errori - * - * Mostra un messaggio di errore e logga in console - */ -function handleError(message) { - pokemonContainer.innerHTML = ` -
- ❌ ${message} -
- `; - console.error('Errore:', message); -} - - -/** - * FUNZIONE: Ricerca un Pokémon per nome o numero - * - * Parametri: - * - Accetta nome (in minuscolo) o numero ID - * - Ritorna oggetto con tutte le info del Pokémon - * - * Passi: - * 1. Leggi il valore dall'input - * 2. Converti a minuscolo e trim() - * 3. Valida che non sia vuoto - * 4. Mostra lo spinner di caricamento - * 5. Fai una GET a https://pokeapi.co/api/v2/pokemon/{input} - * 6. Se la risposta non è OK (404), mostra "Pokémon non trovato" e return - * 7. Converti in JSON - * 8. Chiama displayPokemon() per visualizzare - * 9. Nascondi lo spinner - */ -async function searchPokemon() { - const input = pokemonInput.value.trim().toLowerCase(); - - // VALIDAZIONE - if (!input) { - handleError('Inserisci il nome o numero di un Pokémon'); - return; - } - - loading.classList.remove('nascosto'); - pokemonContainer.innerHTML = ''; - - try { - // 👇 SCRIVI QUI IL TUO CODICE 👇 - - // 1. Fai una fetch GET a: https://pokeapi.co/api/v2/pokemon/ + input - // const response = await fetch('https://pokeapi.co/api/v2/pokemon/' + input); - - // 2. Controlla se la risposta è OK (non 404) - // if (!response.ok) { - // throw new Error('Pokémon non trovato'); - // } - - // 3. Converti in JSON - // const pokemon = await response.json(); - - // 4. Visualizza - // displayPokemon(pokemon); - - throw new Error('Codice non implementato - Completa searchPokemon()'); - - } catch (error) { - handleError(error.message); - } finally { - loading.classList.add('nascosto'); - } -} - /** * FUNZIONE: Visualizza le informazioni del Pokémon - * (Questa funzione è già fatta - non modificare) + * Crea una card con nome, immagine, tipi, altezza e peso. + * Funzione già fatta - non modificare */ function displayPokemon(pokemon) { @@ -99,7 +29,7 @@ function displayPokemon(pokemon) { const weight = (pokemon.weight / 10).toFixed(1); // Converti da hg a kg const types = pokemon.types.map(t => t.type.name).join(', '); - const html = ` + pokemonContainer.innerHTML = `

#${id} - ${name}

@@ -129,10 +59,62 @@ function displayPokemon(pokemon) {
`; - - pokemonContainer.innerHTML = html; } +/** + * FUNZIONE: Gestione errori + * Mostra un messaggio di errore e logga in console + * Funzione già fatta - non modificare + */ +function mostraErrore(message) { + console.error('Errore:', message); + pokemonContainer.innerHTML = ` +
+ ❌ ${message} +
+ `; +} + + +/** + * FUNZIONE: Ricerca un Pokémon per nome o numero + * La funzione cerca un Pokémon e lo visualizza. Se non trovato, mostra un errore. + * + * Parametri dell'API: + * - Accetta nome (in minuscolo) o numero ID + * - Ritorna oggetto con tutte le info del Pokémon + */ +async function searchPokemon() { + const input = pokemonInput.value.trim().toLowerCase(); + + // VALIDAZIONE + if (!input) { + mostraErrore('Inserisci il nome o numero di un Pokémon'); + return; + } + + loading.classList.remove('nascosto'); + pokemonContainer.innerHTML = ''; + + try { + // 1. Fai una fetch GET a: `https://pokeapi.co/api/v2/pokemon/${input}` + + // 2. Controlla se la risposta è OK, altrimenti lancia un errore con "Pokémon non trovato" + + // 3. Converti in JSON + + // 4. Visualizza con displayPokemon() + + throw new Error('Codice non implementato - Completa searchPokemon()'); // Da rimuovere + + } catch (error) { + mostraErrore(error.message); + } + + loading.classList.add('nascosto'); +} + + // ===== COLLEGA GLI EVENTI ===== btnSearch.addEventListener('click', searchPokemon);