fix 11.extras

javascript/JS_Esercizi 11 - API/extra_meteo/index.html

@@ -17,7 +17,7 @@
         <div class="search-box">
             <h2>🔍 Ricerca Città</h2>
             <label>Latitudine e Longitudine:</label>
-            <div class="coord-group">
+            <div class="input-group">
                 <input type="number" id="latitude" placeholder="Lat" step="0.01" value="45.4642">
                 <input type="number" id="longitude" placeholder="Lon" step="0.01" value="9.1900">
                 <button id="btnSearch">Cerca Meteo</button>
@@ -38,35 +38,51 @@
             <h2>📝 Cosa Devi Fare</h2>
             <ol>
                 <li>Leggi latitudine e longitudine dagli input</li>
-                <li>Fai una GET a <code>https://api.open-meteo.com/v1/forecast</code> con parametri:
+                <li>Costruisci l'URL della richiesta con i parametri query
                     <ul style="margin-top: 10px;">
-                        <li><code>latitude={lat}</code></li>
+                        <li>URL base: <code>https://api.open-meteo.com/v1/forecast</code></li>
-                        <li><code>longitude={lon}</code></li>
+                        <li>Parametri: <code>latitude</code>, <code>longitude</code>, <code>current</code>, <code>timezone</code></li>
-                        <li><code>current=temperature_2m,relative_humidity_2m,weather_code</code></li>
-                        <li><code>timezone=auto</code></li>
                     </ul>
                 </li>
-                <li>Estrai i dati dal JSON: <code>response.current</code></li>
+                <li>Fai una GET all'URL che hai costruito</li>
+                <li>Crea l'oggetto dalla risposta JSON</li>
+                <li>
+                    Prendi i dati da dentro <code>response.current</code><br>
+                    L'oggetto è più complesso, ma ci servono solo i dati attuali.
+                </li>
                 <li>Visualizza temperatura, umidità, descrizione meteo</li>
             </ol>
 
             <div class="hint">
-                <strong>💡 URL Completo:</strong>
+                <strong>💡 Come costruire l'URL:</strong>
-                <pre>https://api.open-meteo.com/v1/forecast?latitude=45.46&longitude=9.19&current=temperature_2m,relative_humidity_2m,weather_code&timezone=auto</pre>
+                <p>I parametri query iniziano con <code>?</code> e sono separati da <code>&amp;</code></p>
+                <pre>const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&amp;longitude=${lon}&amp;current=temperature_2m,relative_humidity_2m,weather_code&amp;timezone=auto`;</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 URL Completo (esempio con Milano):</strong>
+                <pre>https://api.open-meteo.com/v1/forecast?latitude=45.46&amp;longitude=9.19&amp;current=temperature_2m,relative_humidity_2m,weather_code&amp;timezone=auto</pre>
+                <p>Puoi testare questo URL direttamente nel browser per vedere la struttura della risposta.</p>
+                <p>
+                    Sarà in formato JSON, copiala e mettila in un visualizzatore JSON online per esplorarla meglio.<br>
+                    Oppure mettila in un file (es. response.json) e aprilo con VSCode, premi CTRL+SHIFT+F per formattarlo.
+                </p>
             </div>
 
             <div class="hint">
                 <strong>💡 Struttura Risposta:</strong>
                 <pre>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
 }</pre>
             </div>
 
             <div class="challenge">
                 <strong>🎯 Bonus Challenge:</strong>
-                <p>Converti il codice meteo in emoji (0=☀️, 1=⛅, 2=☁️, 3=🌧️, ecc.)</p>
+                <p>Converti il codice meteo in emoji (0=☀️, 1=⛅, 2=☁️, 3=🌧️, ecc.) usando una mappa di conversione</p>
             </div>
         </div>
     </div>

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;
 }
 

javascript/JS_Esercizi 11 - API/extra_pokedex/index.html

@@ -38,26 +38,50 @@
             <ol>
                 <li>Leggi il nome/numero dal campo input</li>
                 <li>Fai una GET a <code>https://pokeapi.co/api/v2/pokemon/{name_or_id}</code></li>
-                <li>Se ricevi un errore 404, mostra "Pokémon non trovato"</li>
+                <li>Verifica che la risposta sia OK (gestisci errori 404)
-                <li>Estrai da <code>response</code>:
+                    <ul style="margin-top: 10px;">
+                        <li>Se <code>!response.ok</code>, mostra un errore</li>
+                    </ul>
+                </li>
+                <li>Estrai i dati da <code>response</code>:
                     <ul style="margin-top: 10px;">
                         <li><code>name</code> - Nome</li>
                         <li><code>sprites.front_default</code> - Immagine</li>
                         <li><code>height</code> - Altezza (in decimetri)</li>
                         <li><code>weight</code> - Peso (in ettogrammi)</li>
-                        <li><code>types[].type.name</code> - Tipi (array)</li>
+                        <li><code>types[].type.name</code> - Tipi (è un ARRAY!)</li>
                     </ul>
                 </li>
                 <li>Visualizza le informazioni in una card</li>
             </ol>
 
             <div class="hint">
-                <strong>💡 URL Completo:</strong>
+                <strong>💡 URL Completo (esempio Pikachu):</strong>
                 <pre>https://pokeapi.co/api/v2/pokemon/pikachu</pre>
             </div>
 
             <div class="hint">
-                <strong>💡 Gestire errore 404:</strong>
+                <strong>💡 Array Annidati - Come Accedere a <code>types</code>:</strong>
+                <p><code>types</code> è un ARRAY di oggetti. Ogni elemento ha <code>type.name</code>:</p>
+                <pre>// 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"]</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 Struttura Card da Visualizzare:</strong>
+                <pre>&lt;div class="pokemon-card"&gt;
+  &lt;img src="sprites.front_default" alt="name"&gt;
+  &lt;h3&gt;name&lt;/h3&gt;
+  &lt;p&gt;Altezza: height dm&lt;/p&gt;
+  &lt;p&gt;Peso: weight hg&lt;/p&gt;
+  &lt;p&gt;Tipi: typeNames.join(", ")&lt;/p&gt;
+&lt;/div&gt;</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 Gestire Errori:</strong>
                 <pre>if (!response.ok) {
     throw new Error('Pokémon non trovato');
 }</pre>
@@ -65,7 +89,7 @@
 
             <div class="challenge">
                 <strong>🎯 Bonus Challenge:</strong>
-                <p>Colora la card in base al tipo (Fire=rosso, Water=blu, ecc.). Oppure aggiungi 5 Pokémon random al caricamento della pagina.</p>
+                <p>Aggiungi una funzione che carica 6 Pokémon casuali al caricamento della pagina (usa numeri random tra 1 e 151 per Pokémon validi)</p>
             </div>
         </div>
     </div>