,

Desenvolvendo um Aplicativo de Previsão do Tempo usando HTML, CSS e JavaScript

Posted by






Criando um App de Previsão do tempo com HTML, CSS e JavaScript


App de Previsão do Tempo





In this article, we will be creating a simple weather forecast app using HTML, CSS, and JavaScript. With this app, users will be able to enter a city name and get the current weather information for that city.

First, let’s create the HTML structure for our app. We’ll have an input field for the user to enter the city name, a button to submit the input, and a div to display the weather information.

“`html



Criando um App de Previsão do tempo com HTML, CSS e JavaScript


App de Previsão do Tempo





“`

Next, let’s style our app using CSS. We’ll set the font family, text alignment, and the styles for the input field and button.

“`css

“`

Now, let’s add the JavaScript code to our app. We’ll define a function called `getWeather` that will be triggered when the user clicks the “Buscar” button. This function will make a fetch request to the OpenWeatherMap API to get the weather information for the city entered by the user.

“`javascript

“`

With this HTML, CSS, and JavaScript code, we have created a simple weather forecast app that allows users to enter a city name and get the current weather information for that city. This app can be further enhanced with additional features such as a 5-day forecast, geolocation-based weather, and more. Feel free to customize and expand upon this app to suit your needs and create a more feature-rich weather app.

0 0 votes
Article Rating
20 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Everaldo Carlos
1 year ago

muito bom , meu camarada! Muito obrigado pela aula excelente!

Marcelo
1 year ago

Tô com um problema na dimensão no Live Server esta tudo muito pequeno e se eu aumentar ao meu gosto quando ospedo a página fica tudo muito ampliado
Se alguém puder me ajudar agradeço

vinicius debiasi
1 year ago

Like no vídeo mano, super intuitivo a colocação dos nomes/apelidos nas funções e classes! Por mais professores como você!

Matheus Pacheco
1 year ago

Vídeo top!❤❤

Bento Lima 39
1 year ago

No meu console do navegador não mostra os dados do servidor.. aparece ƒ json() { [native code] }

Vanessa Lopes
1 year ago

Rodolfo , você é excelente professor , consigo entender tudo o que você explica. Obrigada pelas aulas maravilhosas !

Braz Junior
1 year ago

Simplesmente incrível! Muito obrigado por abrir mais minha mente! Estou fazendo a aula e colocando em prática meus conhecimentos, com certeza vai pro portifólio!

Jailson Dev
1 year ago

Rodolfo, eu fiz o meu com o sass, depois da uma olhada ai, e outra pergunta, se eu manda pra o git hub, com a chave key da api, não pode ne? faltou a url da imagem de background image, que fica repetindo.

Renan T. G. B.
1 year ago

Para fazer a "bolinha" do grau Celsius é só segurar Alt e digitar no teclado 248…

°C

Smouldyz
1 year ago

simplesmente incrivel, conheci o seu canal essa semana, e não consigo parar de assistir as aulas, estava até agora nesse vídeo, e deu tudo certinho nesse projeto, você tem uma boa didática , consegue explicar de uma forma que mesmo quem não conheça o assunto, vai entender. Obrigada por isso, por todos os videos do canal, nota mil

Gambinho
1 year ago

cara eu estou literalmente fazendo tudo certo, mas meu css não lê alguns "comandos" como por exemplo o opacity, border-radius, padding, ele mostra que ta dando erro, te mandei mensagem no instagram

Luzia Silva
1 year ago

Muito bom ! Pena que nos 45 do segundo tempo o meu deu bug e nao vou mais bater cabeça com isso .

Jhonatan Lemes
1 year ago

Muito boa aula, ganhou mais um inscrito, já estou correndo pra ver seus outros videos.

Lucas Gabriel
1 year ago

Gostaria de ver uma pokedex, sei que outras pessoas ja fizeram, mas queria ver um video seu sobre. tu é muito foda

JC_ curta
1 year ago

Boa noite gente alguém sabe dizer pq o link do background img , não tá mudando de imagem ???

HARISTYDES
1 year ago

Caminhos de arquivo
Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está.

IURI SANTOS
1 year ago

Top demais sua didática

REI DO CASINO
1 year ago

Vc e foda d mai

Peter
1 year ago

aula massa demais, alguem pode me ajudar? to querendo subir o meu projeto pro github, mas eu to querendo mandar os arquivo da key pro gitignore, alguem sabe que eu faço isso?

Thiago Cainelli
1 year ago

Você é incrível Rodolfo, obrigado pela aula!