Criando um App de Previsão do tempo com HTML, CSS e JavaScript
HTML-код
- Опубликовано: 27 мар 2023
- Vou te ajudar com Programação: go.rodolfomori.com.br/aprenda...
Vamos criar um app de previsão do tempo utilizando HTML, CSS e JavaScript. Para isso vamos usar a API do openweathermap.org.
Inscreva-se no Canal: bit.ly/3h1xtJ5
VsCode: • DOMINE O VSCODE E AUME...
HTML: ruclips.net/user/liveBK3U6pnkMcU
CSS: • CSS DO ZERO - APRENDA ...
JavaScript: ruclips.net/user/liveLH-vuZR6yM0
Funções: • 🔴APRENDA FUNÇÕES EM JA...
Display Flex: ruclips.net/user/liverAOz-uAE71g
Meu código: github.com/rodolfomori/app-pr...
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Meus Links 👇👇
🔥 Todos os meus Links: rodolfomori.com.br/links/
🔴 Live toda Terça: go.rodolfomori.com.br/live-terca
📸 Insta: @rodolfomorii / rodolfomorii
🚀 Receba Dicas de Programação: go.rodolfomori.com.br/telegram
👥 Fale com nossa equipe: go.rodolfomori.com.br/suporte
🎓 Meu curso de Programação: rodolfomori.com.br/devclub
📚 E-book gratuito - Aprenda Programação do ZERO: go.rodolfomori.com.br/ebook
Links da aula 👇👇
Icone nuvem: openweathermap.org/img/wn/04n...
Lupa: www.svgrepo.com/show/488200/f...
API: openweathermap.org/
Background: source.unsplash.com/1600x900/...
Criei este canal para ajudar você que quer sair do ZERO, iniciar sua jornada e se tornar um programador!
Se já é um programador e quer evoluir na carreira de programação, também está no lugar certo, aqui você vai encontrar conteúdos relevantes que vão te ajudar! 
Наука
Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo
Excelente! Até um velho de 59 anos tá aprendendo de boa aqui. Parabéns e obrigado pela excelente aula, que vou recomendar para meus alunos.
Fico muito feliz em saber disso!! Muito obrigado!!
Showwwww
Pessoal, quando tiverem com muita dificuldade pra fazer ou até insistindo que tá certinho mas não tá funcionando, descanse um pouco ou volte até mesmo no outro dia por favor. Tava com muita dificuldade no JS mas voltei no outro dia e fiquei besta do tanto que era simples e eu passando perrengue.
Não desistem só pq não está conseguindo, agente só erra toda vez que não tenta e não pq não estava errado e isso não é pra você, se você der o próximo passo por mais pequeno que seja, você está indo adiante, está evoluindo de pouquinho mas tá indo pra frente.
" Mas, sejam fortes e não desanimem , pois todo o esforço de vocês será recompensado " 2 Crônicas 15:7
Metodologia de outro nível, é incrível aprender e se divertir com sua forma de explicar as coisas, parabéns Rodolfo e toda sua equipe!
Ficamos felizes em saber!!
Muito obrigado, Rodolfo! Você conseguiu ir codando e explicando o que estava fazendo com uma didática de fácil compreensão. Você me fez novamente querer aprender programação. Agradeço de todo meu coração. Que seu canal continue crescendo e que você tenha cada vez mais sucesso em todas as áreas da sua vida!
Muito obrigado man. Fico feliz em saber, tmjj
Você é incrível Rodolfo, obrigado pela aula!
Obrigado professor, graças aos seus vídeos, eu chego em casa as 19:00 e saio 22:30 depois de escrever linhas de código, nunca pensei que fosse me interessar tanto por programação quanto agora. Não vou deixar essa peteca cair, rumo ao cargo de front-end developer!
Vamos pra cima irmão!
Uma sugestão para aprimorar é ao carregar a página já exibir uma informação dinâmica de clima de uma cidade usando uma API que pega nomes aleatórios de cidades
Valeu
Parabéns pelo excelente trabalho. Show de bola!
Didática excelente, muito bom Rodolfo!!
cheguei aqui achando que n saberia de nada mas vi que aprendi muito no caminho,ainda n cheguei em JavaScript ,achei complicado mas é bem interessante até.
Eu sou de Moçambique e juro que fiquei impressionado com a sua forma de dar aulas ❤❤❤❤😍😍😊😊
Valeuu
De nada...Eu vou mudar a minha vida por causa da programação e quem sabe num dia eu chegue em Brasil ksksksksks@@canaldevclub
Terminei de assistir, adorei. Já quero muito chegar em Javascript e quebrar a cabeça nessas conexões de função puxando class que sei que vou me enrolar toda mas acho gostosinho quebrar a cabeça com isso kkk ainda mais quando chega no resultado certo o pulo de alegria vem espontâneo já haha.
Parabéns, ganhou um aluno. Estudo programação a um bom tempo e não conseguia absorver tanta coisa como nessa aula!
Fico feliz em saber, tmjj
Muito obrigado meu amigo seus vídeos nos motivam cada mais Deus te abençoe sempre em nome de Jesus 🙌🏾
Aula muito top! Parabéns, Rodolfo!
Bons estudos!
Simplesmente SENSACIONAL
Explicação super dinâmica, o tempo do video passa que a gente nem vê. Muito bom!
Obrigado!! Tmj
Rodolfo , você é excelente professor , consigo entender tudo o que você explica. Obrigada pelas aulas maravilhosas !
Disponha!
simplesmente sensacional a aula, o que aprendi aqui não aprendi em 1 semestre inteiro da faculdade. parabens pelo video e pela didatica.
Que bom que ajudou
Que video perfeitooo
Que AULA!!! Cara, vc acaba de sanar diversas dúvidas minhas, onde a principal e pra mim a mais importante, que é montar o JS função por função. Parabéns e obrigada por compartilhar seus conhecimentos com uma ótima didática!
Que bom que ajudou
🎉show de bola demais deu certinho super tranquilo, amei a aula tenho uns 3 meses que estudando seus conteúdos e já n tenho dificuldade
Ficamos felizes em saber!!
Cara eu abro o celular td dia e vejo a previsão do tempo na tela, n imaginava q seria algo n complexo um simples local de interação no celular! Estou estudando programação e to achando incrivel ver como as coisas funcionam por trás das cortinas! +1 incrito
Booa, isso ai, bora pra cima
muito bom, bem explicativo, se garante demais!
muito obrigado por ensina o uso de API esta em busca desse conhecimento!
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
Valeu man
você é muito fodaaa, mt obrigado por essa aula
Valeuu, tmjj
Like no vídeo mano, super intuitivo a colocação dos nomes/apelidos nas funções e classes! Por mais professores como você!
Muito obrigado mann, tmjjjj
Como sempre, o melhor conteúdo🎉
Muito massa Rodolfo, continue com esses videos !!!.
Opa pode deixar
Projeto sensacional, alinhada com uma didática mestre. Parabéns. Brabo demais
Valeu
simplesmente incrível professor, todo sucesso do mundo pra você!
Muitíssimo obrigado
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!
Sucesso!
Parabéns pelo seu conteúdo meu amigo, tem me ajudado muito a conseguir evoluir no meu aprendizado de programação, conteúdo claro e bem explicado 👏👏👏👏👏👏👏👏👏
Fico feliz em saber!! Tmj
Rodolfo, faz um vídeo falando como era a sua rotina quando trabalhava no banco, como por exemplo qual tarefa vc fazia, como fazia etc…Tmj🤜🏻🤛🏻
Up
Anotado!
Adorei demais, já tenho alguns conceito de HTML+JS+CSS, só que API era ainda meio embaçado pra mim. com a implementação com API foi uma experiência muito boa pra mim. A explicação do Async e Await foi muito bem explicado agora sei o que cada um deles faz. Parabéns pela didática, e pfvr faz mais desse com REACJS e Vite com algum projeto legal parecido
Obrigado!! Tmjj
que aula top 👏👏👏
Passando pra agradecer ao Rodolfo e a equipe, dele, por trazer conteúdos como esse tão valiosos. Estou em começo de transição sou Assistente adm e rodo de app durante a noite, tenho tentado e aprendido um pouco sobre programação com seus videos. Consegui comprar meu notebook e infelizmente o financeiro não permitiu fazer adesão do curso. Mas desde de já eu agradeço permitir que desfrutemos de conteúdos tão ricos de programação. Abraço
Nós que agradecemos!
Muito parabéns man, por mais vídeos iguais a esse
Opa pode deixar
Muito bom!!!
Sensacional Mori, parabens!!!
Valeu 😊
Brabo 🚀🚀🚀 Concluído com sucesso !!!🎯
Pra cima
amo esses vídeos de projetos reais.
Que isso! Que aula perfeita!!! Conteúdo excelente, muito bem explicado e detalhado! Ganhou mais um inscrito! Conheci seu canal através da aula de lista de tarefas com Javascript que também é maravilhosa e super indico. Meus parabéns pela didática e obrigado por nos disponibilizar esses conteúdos. OBS: Passou despercebido no vídeo e caso alguem tenha dúvida, para manter a palavra Umidade antes da porcentagem basta colocar o código dessa maneira: document.querySelector(".umidade").innerHTML = "Umidade: " + dados.main.humidity + "%"
Vaaaaleu man!
muito bom , meu camarada! Muito obrigado pela aula excelente!
Tmjjj man
Show de bola, muito bom.
🚀🚀
@@canaldevclub Sou seu fã Nº1, se possível me mandar um meio de entrar em contato contigo.
Rodolfo vc e o melhor
Top demais!!!
Muito boa aula, ganhou mais um inscrito, já estou correndo pra ver seus outros videos.
Muito obrigado
Excelente conteúdo!!!
Tmjjj
rodolfo gostei muito desse projeto, muto legal a parte de js
Valeu man, tmjj
obrigado por tudo so te agradecer Deus abncoe sua vida
Obrigado!
Top de mais!!!
Valeu man
Excelente 👏 valeu mano
Eu que agradeço
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á.
Vídeo top!❤❤
Tmj 🚀🚀
gostei da aula, depois de um certo tempo entendi a logica aplicada e consegui fazer sozinho sem acompanhar também...
Bons estudos!
Opa, tava estudando css no DevClub , e chegou a notificação. Já vim conferir haha.
Abraço. Ass: Maria Clara
Muito bom
Top demais sua didática
Valeu!
Essa aplicação é muito top
Boa, fui PM em uma das squads que o Rodolfo trabalhou no Santander e o cara já era monstro demais! To curtindo o conteúdo mesmo não sendo DEV
E aí Matheus ? Beleza ?Quanto tempo man, depois me da um salve lá no insta!
Top
boa mano, parabéns !
seria muito massa vc criar uma playlist e fazer projetos curtos com vídeos que ensinam em sequência
Boa sugestão!
UUma boa aula! 55 minutos da miha vida bem gastos!
Valeu man!! Tmjj
excelente
valeu man
Vc e foda d mai
Ahhh, valeu mesmo
Com essa aula eu fiquei foi nublado 🌥️
😂😂😂😂
Para fazer a "bolinha" do grau Celsius é só segurar Alt e digitar no teclado 248...
°C
Show, cai de nos seus vídeos e estou gostando muito, estou começando no mundo da programação mais ainda estou confuso mais os seus vídeos me deu uma grande visão, me interessei pela área por necessidade otimização de funções na minha área, já deixa uma sugestão de vídeo integração com Erp via api!
Vaaleu Thales, tmj...Precisar de ajuda me chama lá no insta!
Puts que aula
Valeu man, tmj
Grande aula, mestre Rodolfo...o cara que está conseguindo fazer com que eu aprenda programação, vários conceitos de html, css e até mesmo JS estou conseguindo aprender graças a sua didática. Professor Rodolfo, cheguei a dar uma melhorada no código, que você fez, acrescentando velocidade do vento, temp máx e mínima. Mas, tentei ver uma maneira de linkar as bandeiras dos países, tentei ver algum código para consumo de API para fazer isso e não achei. Haveria alguma maneira de fazer isso? Se sim, qual seria o caminha mais simples? Obrigado e parabéns pela sua didática.
Edilson, blz ? Agora você me pegou, porque faz um tempinho que fiz esse projeto, não lembro o que a API retorna, vou dar uma olhada e te falo!
@@canaldevclub perfeito Rodolfo, fico no aguardo. Obrigado e um ótimo final de semana!
Muito bom, parabéns pelo trabalho. Só fiquei com uma dúvdida que não conseguir resolver, o background da imagem do URL deixou a foto repetindo e não conseguir corrigir
Pode colocar um background-repeat: no-repeat;
@@canaldevclub obrigado por responder, tinha colocado o background size 100% e funcionou! Gostei muito do projeto.
Alguem sabe como resolve esse problema aqui? Uncaught ReferenceError: cliqueiNoBotao is not defined at HTMLButtonElement.onclick (Index.html:19:59)
Chama no insta que eu te ajudo!
Melzinho na chupeta foi fod# kkkk 30:30
HAHAHAHAHA
alguém sabe pq quando eu coloco a parte de Css não altera nada no Live server ? margem, tamanha , centralizar absolutamente nada altera
resolveu?
Gostaria de ver uma pokedex, sei que outras pessoas ja fizeram, mas queria ver um video seu sobre. tu é muito foda
tmj man, anotado!
esse link do background não ta funcionando mais, tem algum parecido que da substituir?
Esse video abriu meu cérebro. Contratei um serviço do governo federal TI para minha empresa e jamais esperava que viria essa tal de APIs. Fica perdido. Agora entendi que preciso desenvolver um software/site e integrar as APIs😂😢😅
Estou com a faca e queijo na mão....me aguardem 😊
Vamos pra cima, vai dar bom
Adorei, super intuitivo, so ficou uma duvida, quando a informação é "Ceu limpo" o icone fica cinza e nao aparece o certo que seria o Sol
Estranho. A API deve estar mandando os dados errados!
bom dia, tive mesmo erro, conseguiu corrigir?
Eu criei a temperatura mínima, passei os parâmetros e mesmo assim, em algumas cidades, o min e máx estão iguais. Pode ser algum problema na api?
Tenta dar um console.log pra ver o que está vindo da api
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.
Poder pode, não é um app super secreto.
@@canaldevclub acho que falta um tratamento de erro, pq tem vez que dá undefanid
este projeto ficaria da hora si trocasse o fundo da pagina de acordo com a cidade digitada mas fico top
Opa. fica o desafio ai..depois me manda como ficou!
boa noite
Eu senti que no HTML e css as informacoes foram passadas super de boa, mas quando chegou no Java script ficou tudo muito acelerado e colocando varios codigos dentro do outro e ficou muito confuso 😕
E ai man, blz ? Então, por isso eu sugiro no começo do vídeo ter uma base nessas tecnologias antes de assistir a esse vídeo. Tem alguns vídeos de JS no canal...da uma olhada, e dps volta aqui...vai te ajudar muito!
Boa noite Rodolfo, tenho uma dúvida, fiz exatamente igual p mudar a nuvem. Ele altera quando é tempo nublado e chuvoso, mas quando é tempo limpo, fica uma bolinha escura sem nenhum icone :(
Me chama no insta que eu te ajudo!
as imagens não ficaram passando.
Me chama no insta q eu te ajudo
Obrigado pela explicação, segui o passo a passo e deu tudo certo. Porém, não estou conseguindo acessar esse endereço do site pelo celular, sabe dizer se tem como?
Tem sim! O que está dando ?
Muito bom ! Pena que nos 45 do segundo tempo o meu deu bug e nao vou mais bater cabeça com isso .
Qualquer coisa, me chama no insta!
Bati tanto a cabeça tentando entender e consegui fazer ficou excelente! 🎉
No meu console do navegador não mostra os dados do servidor.. aparece ƒ json() { [native code] }
Me chama no insta q eu te ajudo
Para começar preciso primeiro entender HTML de cabo a rabo, depois css e por último JS, o posso começar o estudo mesclando os 3 essa é uma dúvida real. Obrigado
Aconselho a ir estudando os 3 ao mesmo tempo, pq afinal, vc normalmente usa eles juntos.
Olá, estou com dificuldade no símbolo da => está dando um erro nesse símbolo.. poderia me explicar se essa seta é feito de alguma outra maneira ?? Estou fazendo a programação pelo notebook
Qual erro está dando ?
como faço para habilitar a tecla Enter (id 13) para poder pesquisar a cidade tbm?
basicamente isso, adapte alguns pontos ao seu código!
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
"Só pra deixar claro, eu gosto de por tudo em inglês!" kkkkk '-'
Lá ele
Não estou conseguindo adicionar o background no css digitei tudo certo, mas no navegador não aparece imagem nenhuma!
Me manda seu código no insta que eu te ajudo!
O meu está ficando em ingles quando procuro outras cidades e a temperatura não esta ficando arredondada.. alguem poderia me ajudar?
Você colocou as configurações para ficar em portugues ? Não errou nenhuma letrinha ?
Como faço se eu quiser que ja apareça a previsão da minha cidade sem que eu precisa buscar no botão?
Coloca o nome da sua cidade
Rodolfo dá pra fazer esse projeto pelo celular?? não tenho computador, mais quero muito aprender a programar
Da sim!
Eu não estou conseguindo colocar a imagem que muda automaticamente, eu copiei o endereço porem a imagem fica fixa o tempo todo no background, o que eu tenho que fazer nesse caso ?
Era para ir trocando...Tenta abrir e fechar o live server
@@canaldevclub já deu certo graças a Deus obrigado