diff --git a/javascript/JS_Esercizi 11 - API/extra_meteo/index.html b/javascript/JS_Esercizi 11 - API/extra_meteo/index.html index ab617d1..ca16941 100644 --- a/javascript/JS_Esercizi 11 - API/extra_meteo/index.html +++ b/javascript/JS_Esercizi 11 - API/extra_meteo/index.html @@ -17,7 +17,7 @@

🔍 Ricerca Città

-
+
@@ -38,35 +38,51 @@

📝 Cosa Devi Fare

  1. Leggi latitudine e longitudine dagli input
    2. -
  2. Fai una GET a https://api.open-meteo.com/v1/forecast con parametri: +
  3. Costruisci l'URL della richiesta con i parametri query
      -
    • latitude={lat}
      • -
    • longitude={lon}
      • -
    • current=temperature_2m,relative_humidity_2m,weather_code
      • -
    • timezone=auto
      • +
    • URL base: https://api.open-meteo.com/v1/forecast
      • +
    • Parametri: latitude, longitude, current, timezone
    4. -
  4. Estrai i dati dal JSON: response.current
    5. +
  5. Fai una GET all'URL che hai costruito
    6. +
  6. Crea l'oggetto dalla risposta JSON
    7. +
  7. + Prendi i dati da dentro response.current
    + L'oggetto è più complesso, ma ci servono solo i dati attuali. +
  8. Visualizza temperatura, umidità, descrizione meteo
- 💡 URL Completo: - 
https://api.open-meteo.com/v1/forecast?latitude=45.46&longitude=9.19¤t=temperature_2m,relative_humidity_2m,weather_code&timezone=auto
+ 💡 Come costruire l'URL: +

I parametri query iniziano con ? e sono separati da &

+ 
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,weather_code&timezone=auto`;
+
+ +
+ 💡 URL Completo (esempio con Milano): + 
https://api.open-meteo.com/v1/forecast?latitude=45.46&longitude=9.19&current=temperature_2m,relative_humidity_2m,weather_code&timezone=auto
+

Puoi testare questo URL direttamente nel browser per vedere la struttura della risposta.

+

+ Sarà in formato JSON, copiala e mettila in un visualizzatore JSON online per esplorarla meglio.
+ Oppure mettila in un file (es. response.json) e aprilo con VSCode, premi CTRL+SHIFT+F per formattarlo. +

💡 Struttura Risposta: 
response.current = {
+  time: "2024-06-01T12:00:00Z",
+  interval: 900,
   temperature_2m: 22.5,
   relative_humidity_2m: 65,
-  weather_code: 0  // 0=soleggiato, 1=nuvoloso, ecc
+  weather_code: 0  // 0=soleggiato, 1=nuvoloso, 2=coperto, 3=pioggia, ecc
 }
🎯 Bonus Challenge: -

Converti il codice meteo in emoji (0=☀️, 1=⛅, 2=☁️, 3=🌧️, ecc.)

+

Converti il codice meteo in emoji (0=☀️, 1=⛅, 2=☁️, 3=🌧️, ecc.) usando una mappa di conversione

diff --git a/javascript/JS_Esercizi 11 - API/extra_meteo/style.css b/javascript/JS_Esercizi 11 - API/extra_meteo/style.css index 1da88a8..1fef8ec 100644 --- a/javascript/JS_Esercizi 11 - API/extra_meteo/style.css +++ b/javascript/JS_Esercizi 11 - API/extra_meteo/style.css @@ -54,13 +54,13 @@ h1 { font-size: 0.95rem; } -.coord-group { +.input-group { display: flex; gap: 10px; margin-bottom: 10px; } -.coord-group input { +.input-group input { flex: 1; padding: 10px; border: 2px solid #ddd; @@ -69,13 +69,13 @@ h1 { font-family: inherit; } -.coord-group input:focus { +.input-group input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); } -.coord-group button { +.input-group button { padding: 10px 20px; background: #007bff; color: white; @@ -86,7 +86,7 @@ h1 { transition: background 0.2s; } -.coord-group button:hover { +.input-group button:hover { background: #0056b3; } diff --git a/javascript/JS_Esercizi 11 - API/extra_pokedex/index.html b/javascript/JS_Esercizi 11 - API/extra_pokedex/index.html index fb7b91a..deee7f5 100644 --- a/javascript/JS_Esercizi 11 - API/extra_pokedex/index.html +++ b/javascript/JS_Esercizi 11 - API/extra_pokedex/index.html @@ -38,26 +38,50 @@
  1. Leggi il nome/numero dal campo input
  2. Fai una GET a https://pokeapi.co/api/v2/pokemon/{name_or_id}
    3. -
  3. Se ricevi un errore 404, mostra "Pokémon non trovato"
    4. -
  4. Estrai da response: +
  5. Verifica che la risposta sia OK (gestisci errori 404) +
      +
    • Se !response.ok, mostra un errore
      • +
    +
    6. +
  6. Estrai i dati da response:
    • name - Nome
    • sprites.front_default - Immagine
    • height - Altezza (in decimetri)
    • weight - Peso (in ettogrammi)
      • -
    • types[].type.name - Tipi (array)
      • +
    • types[].type.name - Tipi (è un ARRAY!)
  7. Visualizza le informazioni in una card
- 💡 URL Completo: + 💡 URL Completo (esempio Pikachu): 
https://pokeapi.co/api/v2/pokemon/pikachu
- 💡 Gestire errore 404: + 💡 Array Annidati - Come Accedere a types: +

types è un ARRAY di oggetti. Ogni elemento ha type.name:

+ 
// response.types = [{type: {name: "electric"}}, {type: {name: "flying"}}]
+// Per estrarre i nomi, usa map():
+const typeNames = response.types.map(t => t.type.name);
+// Risultato: ["electric", "flying"]
+
+ +
+ 💡 Struttura Card da Visualizzare: + 
<div class="pokemon-card">
+  <img src="sprites.front_default" alt="name">
+  <h3>name</h3>
+  <p>Altezza: height dm</p>
+  <p>Peso: weight hg</p>
+  <p>Tipi: typeNames.join(", ")</p>
+</div>
+
+ +
+ 💡 Gestire Errori: 
if (!response.ok) {
     throw new Error('Pokémon non trovato');
 }
@@ -65,7 +89,7 @@
🎯 Bonus Challenge: -

Colora la card in base al tipo (Fire=rosso, Water=blu, ecc.). Oppure aggiungi 5 Pokémon random al caricamento della pagina.

+

Aggiungi una funzione che carica 6 Pokémon casuali al caricamento della pagina (usa numeri random tra 1 e 151 per Pokémon validi)