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

rinomina esercizi js

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-12 18:36:35 +01:00
parent f0b6b85b36
commit 60878cf770
150 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
javascript/11_API/extra_meteo/index.html Normal file
View File

@@ -0,0 +1,92 @@
<!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="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>
</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 nascosto">
⏳ 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>Costruisci l'URL della richiesta con i parametri query
<ul style="margin-top: 10px;">
<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>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>💡 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, 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.) usando una mappa di conversione</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>