fix 11.extras

2026-02-11 23:53:15 +01:00
parent 11e4d607c9
commit 6e3f5a4eff
3 changed files with 62 additions and 22 deletions
--- a/API/extra_meteo/index.html
+++ b/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><code>longitude={lon}</code></li>
-                        <li><code>current=temperature_2m,relative_humidity_2m,weather_code</code></li>
-                        <li><code>timezone=auto</code></li>
+                        <li>URL base: <code>https://api.open-meteo.com/v1/forecast</code></li>
+                        <li>Parametri: <code>latitude</code>, <code>longitude</code>, <code>current</code>, <code>timezone</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>
-                <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>
+                <strong>💡 Come costruire l'URL:</strong>
+                <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>
--- a/API/extra_meteo/style.css
+++ b/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;
 }

--- a/API/extra_pokedex/index.html
+++ b/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>Estrai da <code>response</code>:
+                <li>Verifica che la risposta sia OK (gestisci errori 404)
+                    <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>