Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Esercizio 11 API

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-05 11:57:28 +01:00
parent f4d3e40059
commit 86611fd6e2
37 changed files with 5057 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
javascript/JS_Esercizi 11 - API/05_meteo/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extra 1 - App Meteo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
<div class="app-container">
<h1>🌤️ App Meteo</h1>
<p class="subtitle">API pubblica Open-Meteo</p>
<!-- SEZIONE RICERCA -->
<div class="search-box">
<h2>🔍 Ricerca Città</h2>
<label>Latitudine e Longitudine:</label>
<div class="coord-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>
</div>
<p class="hint-text">💡 Esempi: Milano (45.46, 9.19) | Roma (41.90, 12.50) | Napoli (40.85, 14.27)</p>
</div>
<!-- LOADING -->
<div id="loading" class="loading" style="display: none;">
⏳ Caricamento meteo...
</div>
<!-- RISULTATO -->
<div id="weatherContainer" class="weather-container"></div>
<!-- ISTRUZIONI -->
<div class="instructions">
<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:
<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>
</ul>
</li>
<li>Estrai i dati dal JSON: <code>response.current</code></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>
</div>
<div class="hint">
<strong>💡 Struttura Risposta:</strong>
<pre>response.current = {
temperature_2m: 22.5,
relative_humidity_2m: 65,
weather_code: 0 // 0=soleggiato, 1=nuvoloso, ecc
}</pre>
</div>
<div class="challenge">
<strong>🎯 Bonus Challenge:</strong>
<p>Converti il codice meteo in emoji (0=☀️, 1=⛅, 2=☁️, 3=🌧️, ecc.)</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

111
javascript/JS_Esercizi 11 - API/05_meteo/script.js Normal file
View File

@@ -0,0 +1,111 @@
/**
* 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
*/
/**
* Ricerca il meteo per latitudine e longitudine
*
* Parametri obbligatori:
* - latitude: numero decimale
* - longitude: numero decimale
* - current: variabili da ottenere (separati da virgola)
* - timezone: 'auto' oppure fuso orario specifico
*/
async function searchWeather() {
const latitude = document.getElementById('latitude').value;
const longitude = document.getElementById('longitude').value;
const loading = document.getElementById('loading');
const container = document.getElementById('weatherContainer');
// VALIDAZIONE
if (!latitude || !longitude) {
container.innerHTML = '<div class="error">❌ Inserisci latitudine e longitudine</div>';
return;
}
loading.style.display = 'block';
container.innerHTML = '';
try {
// 👇 SCRIVI QUI IL TUO CODICE 👇
// Costruisci l'URL con i parametri corretti:
// const url = 'https://api.open-meteo.com/v1/forecast?latitude=' + ...
// const response = await fetch(url);
// const data = await response.json();
// displayWeather(data.current, latitude, longitude);
throw new Error('Codice non implementato - Completa searchWeather()');
} catch (error) {
container.innerHTML = `<div class="error">❌ ${error.message}</div>`;
console.error('Errore:', error);
} finally {
loading.style.display = 'none';
}
}
/**
* Visualizza i dati meteo
* (Questa funzione è già fatta)
*/
function displayWeather(current, lat, lon) {
const container = document.getElementById('weatherContainer');
// 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>
`;
container.innerHTML = html;
}
// COLLEGA IL BOTTONE
document.getElementById('btnSearch').addEventListener('click', searchWeather);
// PERMETTI ENTER
document.getElementById('latitude').addEventListener('keypress', (e) => {
if (e.key === 'Enter') searchWeather();
});
document.getElementById('longitude').addEventListener('keypress', (e) => {
if (e.key === 'Enter') searchWeather();
});

228
javascript/JS_Esercizi 11 - API/05_meteo/style.css Normal file
View File

@@ -0,0 +1,228 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.app-container {
background: white;
width: 100%;
max-width: 550px;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
h1 {
color: #333;
text-align: center;
margin: 0 0 10px 0;
font-size: 1.8rem;
}
.subtitle {
color: #666;
text-align: center;
margin: 0 0 30px 0;
font-size: 1rem;
}
.search-box {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
}
.search-box label {
display: block;
color: #555;
font-weight: 600;
margin-bottom: 10px;
}
.coord-group {
display: flex;
gap: 10px;
}
.coord-group input {
flex: 1;
padding: 12px;
border: 2p0px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 15px;
}
.coord-group input:focus {
outline: none;
border-color: #007bff;
}
.coord-group button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
.coord-group button:hover {
background: #0056b3
.hint-text {
color: #666;
font-size: 0.9em;
margin-top: 185rpx;
}
.loading {
text-align: center;
color: white;
font-si#666;
padding: 3 pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.weather-container {
margin-bottom: 50px;
}30px;
}
.weather-card {
background: #f9f9f9;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.location {
text-align: center;
color: #666;
margin-bottom: 20px;
font-size: 0.95em;
}
.weather-main {
text-align: center;
margin: 30px 0;
}
.emoji {
font-size: 4em;
color: #666;
margin-bottom: 20px;
font-size: 0.9rem;
text-align: center;
}
.weather-main {
text-align: center;
margin: 20px 0;
}
.emoji {
font-size: 3.5em;
margin-bottom: 10px;
}
.temp {
font-size: 2.2em;
font-weight: bold;
color: #333;
}
.weather-details {
background: white;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #007bff;
}
.weather-details p {
color: #555;
margin: 10px 0;
line-height: 1.5 rgba(255, 255, 255, 0.95);
padding: 25px;
border-radius: 12px;
margin-top: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.instructions h2 {
color: #333;
margin-bottom: 20px;
font-size15px;
border-radius: 6px;
border-left: 4px solid #c
margin-left: 25px;
color: #555;
line-heig-box {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #007bff;
margin-top: 30px;
}
.instructions-box h2 {
color: #333;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.instructions-box ol, .instructions-box ul {
margin-left: 20px;
color: #555;
line-height: 1.7;
}
.instructions-box li {
margin-bottom: 8px;
}
.instructions-box code {
background: white;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: #d63384;
font-size: 0.9em;
}
.hint {
background: white;
border: 1px solid #ddd;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
}
.hint strong {
color: #007bff;
display: block;
margin-bottom: 10px;
}
.hint pre {
background: #f0f0f0;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
font-size: 0.8em;
color: #333;
margin: 0;
word-break: break-all