Vou mostrar-te: transformar dados num widget
O Open-Meteo também pode dar previsão para os próximos dias. Basta acrescentar o que queres ao endereço:
https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=autoNa resposta encontras daily.time (lista de dias), daily.temperature_2m_max e daily.temperature_2m_min (temperaturas máxima e mínima). A mesma ordem = o primeiro dia corresponde à primeira temperatura.
Depois constróis o widget num ciclo:
<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>E um pouco de CSS para parecer um widget a sério:
.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;
}Agora és tu 💪
Adiciona um widget de tempo onde faça sentido no teu projeto:
🏫 Site da escola – solução
Na página de eventos escolares: «Tempo para a viagem de campo.» Define as coordenadas para o destino – crianças e pais vão agradecer saber o que levar.
🙋 Site pessoal – solução
No cabeçalho ou rodapé: tempo na tua cidade como toque pessoal («Hoje estão 18 °C aqui na minha cidade»).
🌍 Diário de viagens – solução
Para cada viagem planeadas, um widget com previsão no destino. Basta mudar as coordenadas para o local da viagem.
⚽ Site de clube – solução
Na página do jogo: «Tempo para o jogo de sábado.» Encontra as coordenadas do campo no mapa. Bónus: se estiver prevista chuva, mostra «Leva um casaco impermeável!»
Onde arranjo coordenadas? Num serviço de mapas, clique direito num local → «What’s here?» – as coordenadas aparecem em cima.
Verifica: O teu site tem um widget com previsão real de 3 dias, estilizado conforme o teu design. Os dados carregam em direto da API.
O que ficas a saber desta lição
- Dizes a uma API o que queres com a parte depois do ponto de interrogação (parâmetros).
- Constróis dados de listas em HTML com um ciclo
for. - Números em JSON tornam-se um widget real – o design és tu que o fazes.
© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo