DEV Community 👩‍💻👨‍💻

Cover image for Criando overlay com a previsão do tempo
Bruna Ferreira
Bruna Ferreira

Posted on

Criando overlay com a previsão do tempo

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>
Enter fullscreen mode Exit fullscreen mode


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

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


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" />
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode


Gerando este resultado:
Retângulo contendo informações sobre o clima

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!

Top comments (1)

Collapse
 
eduardoklosowski profile image
Eduardo Klosowski

Muito bom! Já estou esperando o próximo artigo.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.