66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
// 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');
|
|
}
|