Criando overlay com a previsão do tempo

#braziliandevs #html

Após várias pessoas perguntarem se eu estava com frio durante as lives na Twitch, surgiu a ideia de colocar um overlay com a previsão do tempo, mostrando a temperatura atual da minha localização.

Foi possível fazer isso de uma maneira simples, usando uma página HTML e uma API.

Vamos aos passos:

Primeiramente, criamos um arquivo com a estrutura básica de HTML:

<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <title>Titulo</title>
        </head>
        <body>
        </body>
    </html>

Dentro do corpo do HTML, criamos uma tag <img> da seguinte forma:

    <img src="http://wttr.in/~Lages+Brazil_tqp0.png">

Desta maneira acessamos a API que nos retorna uma imagem .png, através do link vamos passar alguns parâmetros, são eles:

Localização - informa o nome da cidade e país;
t - aplica transparência na imagem;
q- retira o texto “previsão do tempo” deixando só o nome da cidade e país como título;
p - adiciona uma borda ao redor da imagem;
0 - deixa visível somente o clima no momento atual.

Além destes, existem outros parâmetros que modificam a imagem.

Por fim adicionamos um <meta> tag que atualizará a página em determinado tempo (em segundos):

    <meta http-equiv="refresh" content="300" />

A estrutura final do código fica assim:

<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="refresh" content="300" />
            <title>Previsão do tempo</title>
        </head>
        <body>
            <img src="http://wttr.in/~Lages+Brazil_tqp0.png" >
        </body>
    </html>

Gerando este resultado:

Com a página pronta, basta adicionar uma fonte de navegador no OBS com o caminho no qual o arquivo HTML foi salvo.

Mais informações sobre a API neste github.

Enjoy!