Te lo muestro: convertir datos en un widget
Open-Meteo también puede dar la previsión de los próximos días. Solo añade lo que quieras a la dirección:
https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=autoEn la respuesta encontrarás daily.time (lista de días), daily.temperature_2m_max y daily.temperature_2m_min (temperaturas máxima y mínima). Mismo orden = el primer día coincide con la primera temperatura.
Luego construyes el widget en un bucle:
<div id="pocasi" class="pocasi-widget"></div>
<script type="module">
const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
const data = await (await fetch(adresa)).json();
const dny = data.daily.time;
const max = data.daily.temperature_2m_max;
const min = data.daily.temperature_2m_min;
let html = '';
for (let i = 0; i < 3; i++) {
const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
html += `<div class="den">
<strong>${den}</strong>
<span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
</div>`;
}
document.querySelector('#pocasi').innerHTML = html;
</script>Y un poco de CSS para que parezca un widget de verdad:
.pocasi-widget {
display: flex;
gap: 10px;
}
.pocasi-widget .den {
border: 1px solid #ddd;
border-radius: 12px;
padding: 12px 16px;
display: flex;
flex-direction: column;
align-items: center;
}Ahora tú 💪
Añade un widget del tiempo donde tenga sentido en tu proyecto:
🏫 Web del cole – solución
En la página de eventos del cole: «Tiempo para la excursión». Pon las coordenadas del destino – niños y padres agradecerán saber qué llevar.
🙋 Web personal – solución
En la cabecera o el pie: el tiempo en tu ciudad como toque personal («Hoy hace 18 °C en mi pueblo»).
🌍 Diario de viajes – solución
Para cada viaje planificado, un widget con la previsión en el destino. Solo cambia las coordenadas del lugar del viaje.
⚽ Web del club – solución
En la página del partido: «Tiempo para el partido del sábado». Busca las coordenadas del campo en un mapa. Extra: si se espera lluvia, muestra «¡Lleva impermeable!»
¿De dónde saco las coordenadas? En un servicio de mapas, clic derecho en un lugar → «What’s here?» – las coordenadas aparecerán arriba.
Compruébalo: Tu web tiene un widget con una previsión real de 3 días, con un estilo que encaja con tu diseño. Los datos se cargan en vivo desde la API.
Lo que te llevas de esta lección
- Le dices a una API qué quieres con la parte después del signo de interrogación (parámetros).
- Construyes datos de listas en HTML con un bucle
for. - Los números en JSON se convierten en un widget de verdad – el diseño lo pones tú.
© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido