Esercizio 11 API

2026-02-05 11:57:28 +01:00
parent f4d3e40059
commit 86611fd6e2
37 changed files with 5057 additions and 0 deletions
--- a/API/meteo/script.js
+++ b/API/meteo/script.js
@@ -0,0 +1,65 @@
+// TODO: Completa questa funzione
+async function fetchWeatherData() {
+    const loading = document.getElementById('loading');
+    const result = document.getElementById('result');
+    const weatherInfo = document.getElementById('weatherInfo');
+
+    // 1. Mostra il loading spinner
+    loading.style.display = 'block';
+    result.classList.remove('show');
+
+    try {
+        // 2. Scrivi qui il fetch per ottenere i dati da:
+        //    http://localhost:3000/api/weather
+        // 3. Converti la risposta in JSON
+        // 4. Mostra i dati nella pagina
+
+        // SUGGERIMENTO: Usa la struttura vista nel tutorial
+        // const response = await fetch('...');
+        // const data = await response.json();
+
+        console.log('Scrivi il codice qui!');
+        throw new Error('Codice non implementato');
+
+    } catch (error) {
+        console.error('Errore:', error);
+        result.classList.add('show');
+        weatherInfo.innerHTML = `
+            <div class="weather-detail error">
+                <strong>❌ Errore:</strong> ${error.message}
+            </div>
+        `;
+    } finally {
+        loading.style.display = 'none';
+    }
+}
+
+// Funzione helper per formattare la risposta
+function displayWeatherData(data) {
+    const weatherInfo = document.getElementById('weatherInfo');
+    const result = document.getElementById('result');
+
+    if (Array.isArray(data)) {
+        // Se è un array
+        weatherInfo.innerHTML = data.map(item => `
+            <div class="weather-detail success">
+                <h3>${item.city || item.name || 'Città sconosciuta'}</h3>
+                <p>🌡️ Temperatura: ${item.temperature || item.temp || 'N/A'}°C</p>
+                <p>💨 Umidità: ${item.humidity || 'N/A'}%</p>
+                <p>☁️ Condizioni: ${item.condition || item.description || 'N/A'}</p>
+            </div>
+        `).join('');
+    } else {
+        // Se è un singolo oggetto
+        weatherInfo.innerHTML = `
+            <div class="weather-detail success">
+                <h3>${data.city || data.name || 'Città sconosciuta'}</h3>
+                <p>🌡️ Temperatura: ${data.temperature || data.temp || 'N/A'}°C</p>
+                <p>💨 Umidità: ${data.humidity || 'N/A'}%</p>
+                <p>☁️ Condizioni: ${data.condition || data.description || 'N/A'}</p>
+            </div>
+        `;
+    }
+
+    result.classList.add('show');
+}