158 lines
4.9 KiB
JavaScript
158 lines
4.9 KiB
JavaScript
/**
|
|
* EXTRA 1: App Meteo con Open-Meteo
|
|
*
|
|
* Open-Meteo è un'API PUBBLICA e GRATUITA che NON richiede autenticazione!
|
|
* Puoi fare centinaia di richieste al giorno senza problemi.
|
|
*
|
|
* API Base: https://api.open-meteo.com/v1/forecast
|
|
*/
|
|
|
|
// ===== VARIABILI DEL DOM =====
|
|
const latitude = document.getElementById('latitude');
|
|
const longitude = document.getElementById('longitude');
|
|
const btnSearch = document.getElementById('btnSearch');
|
|
const loading = document.getElementById('loading');
|
|
const weatherContainer = document.getElementById('weatherContainer');
|
|
|
|
|
|
/**
|
|
* FUNZIONE: Gestione errori
|
|
*
|
|
* Mostra un messaggio di errore e logga in console
|
|
*/
|
|
function handleError(message) {
|
|
weatherContainer.innerHTML = `
|
|
<div class="error">
|
|
<strong>❌ ${message}</strong>
|
|
</div>
|
|
`;
|
|
console.error('Errore:', message);
|
|
}
|
|
|
|
|
|
/**
|
|
* FUNZIONE: Ricerca il meteo per latitudine e longitudine
|
|
*
|
|
* Parametri obbligatori dell'API:
|
|
* - latitude: numero decimale
|
|
* - longitude: numero decimale
|
|
* - current: variabili da ottenere (separati da virgola)
|
|
* - timezone: 'auto' oppure fuso orario specifico
|
|
*
|
|
* Passi:
|
|
* 1. Leggi latitudine e longitudine dagli input
|
|
* 2. Valida che siano compilati
|
|
* 3. Mostra lo spinner di caricamento
|
|
* 4. Costruisci l'URL con i parametri corretti
|
|
* 5. Fai una GET a https://api.open-meteo.com/v1/forecast
|
|
* 6. Se non OK, mostra errore e return
|
|
* 7. Converti in JSON
|
|
* 8. Estrai data.current
|
|
* 9. Chiama displayWeather() per visualizzare
|
|
* 10. Nascondi lo spinner
|
|
*/
|
|
async function searchWeather() {
|
|
const lat = latitude.value;
|
|
const lon = longitude.value;
|
|
|
|
// VALIDAZIONE
|
|
if (!lat || !lon) {
|
|
handleError('Inserisci latitudine e longitudine');
|
|
return;
|
|
}
|
|
|
|
loading.classList.remove('nascosto');
|
|
weatherContainer.innerHTML = '';
|
|
|
|
try {
|
|
// 👇 SCRIVI QUI IL TUO CODICE 👇
|
|
|
|
// 1. Costruisci l'URL con i parametri corretti:
|
|
// const url = 'https://api.open-meteo.com/v1/forecast' +
|
|
// '?latitude=' + lat +
|
|
// '&longitude=' + lon +
|
|
// '¤t=temperature_2m,relative_humidity_2m,weather_code' +
|
|
// '&timezone=auto';
|
|
|
|
// 2. Fai la fetch
|
|
// const response = await fetch(url);
|
|
|
|
// 3. Se non OK, mostra errore e return
|
|
// if (!response.ok) {
|
|
// throw new Error('Errore nel caricamento dei dati meteo');
|
|
// }
|
|
|
|
// 4. Converti in JSON
|
|
// const data = await response.json();
|
|
|
|
// 5. Estrai i dati meteo e visualizza
|
|
// displayWeather(data.current, lat, lon);
|
|
|
|
throw new Error('Codice non implementato - Completa searchWeather()');
|
|
|
|
} catch (error) {
|
|
handleError(error.message);
|
|
} finally {
|
|
loading.classList.add('nascosto');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* FUNZIONE: Visualizza i dati meteo
|
|
* (Questa funzione è già fatta - non modificare)
|
|
*/
|
|
function displayWeather(current, lat, lon) {
|
|
|
|
// Converti codice meteo in descrizione
|
|
const weatherDescriptions = {
|
|
0: { emoji: '☀️', descrizione: 'Sereno' },
|
|
1: { emoji: '🌤️', descrizione: 'Poco nuvoloso' },
|
|
2: { emoji: '⛅', descrizione: 'Nuvoloso' },
|
|
3: { emoji: '☁️', descrizione: 'Molto nuvoloso' },
|
|
45: { emoji: '🌫️', descrizione: 'Nebbia' },
|
|
48: { emoji: '🌫️', descrizione: 'Nebbia con brina' },
|
|
51: { emoji: '🌧️', descrizione: 'Pioggia leggera' },
|
|
53: { emoji: '🌧️', descrizione: 'Pioggia' },
|
|
55: { emoji: '⛈️', descrizione: 'Pioggia forte' },
|
|
80: { emoji: '🌧️', descrizione: 'Pioggia leggera' },
|
|
81: { emoji: '🌧️', descrizione: 'Pioggia' },
|
|
82: { emoji: '⛈️', descrizione: 'Pioggia forte' },
|
|
95: { emoji: '⛈️', descrizione: 'Temporale' },
|
|
};
|
|
|
|
const weather = weatherDescriptions[current.weather_code] || { emoji: '❓', descrizione: 'Sconosciuto' };
|
|
|
|
const html = `
|
|
<div class="weather-card">
|
|
<div class="location">
|
|
📍 ${lat.toFixed(2)}°N, ${lon.toFixed(2)}°E
|
|
</div>
|
|
|
|
<div class="weather-main">
|
|
<div class="emoji">${weather.emoji}</div>
|
|
<div class="temp">${current.temperature_2m}°C</div>
|
|
</div>
|
|
|
|
<div class="weather-details">
|
|
<p><strong>Condizione:</strong> ${weather.descrizione}</p>
|
|
<p><strong>Umidità:</strong> ${current.relative_humidity_2m}%</p>
|
|
<p><strong>Codice Meteo:</strong> ${current.weather_code}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
weatherContainer.innerHTML = html;
|
|
}
|
|
|
|
// ===== COLLEGA GLI EVENTI =====
|
|
btnSearch.addEventListener('click', searchWeather);
|
|
|
|
// PERMETTI ENTER
|
|
latitude.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') searchWeather();
|
|
});
|
|
|
|
longitude.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') searchWeather();
|
|
});
|