AUTOCOMPLETAR ENDEREÇO PELO CEP - PROJETO DE HTML, CSS E JAVASCRIPT (API VIACEP)

Neste vídeo você vai criar um projeto de autocomplete de endereço com #HTML #CSS e #JavaScript
Vamos consultar uma API passando um CEP de algum endereço, e receberemos um JSON como retorno. Extraindo os dados do JSON conseguimos preencher os campos de: Rua, Cidade, Bairro e Estado do usuário. Este projeto é visto principalmente em e-commerces, na etapa de configuração de endereço de entrega.
📂 Código do projeto: github.com/mat...
📒 Ebook JavaScript gratuito: www.horadecoda...
🔴 Instagram: @horadecodar
🟢 Curso JavaScript Completo: www.udemy.com/...
🟠 Curso Node.js Completo: www.udemy.com/...
🟣 Curso React Completo: www.udemy.com/...
⭐ Nossos cursos: www.horadecoda... 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord

[@MatheusBattisti]

⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE

[@devTainaFarias]

43:33 começa js

[@AllGutemberg]

O "defer" quase me deixou louco, esqueci de colocar... agora vou procurar entender o que ele faz... ótimo vídeo Matheus.

[@MatheusBattisti]

haha faz parte Alfredo!

[@mizaelktnazareno]

First , cara gente curto demais conteúdo , mais um projeto bacana , valeu meu camarada

[@MatheusBattisti]

valeu pelo feedback Mizael =D

[@portalispcursos]

4 dias fiquei fazendo esse projeto debulhei linha a linha é foi muito satisfatório a hora que a API trouxe os dados para o front-end Meus olhos até brilharam fiquei muito feliz e foi de muita ajuda. Obrigado faz mais projetos como esse um bom seria fazendo aquela integração com a API do google onde implementamos em nossa página de login para fazer login com Google

[@wandersonfsouza]

Ótimo mini curso, obrigado Matheus por compartilhar seus conhecimentos

[@hstecnologia]

Eu fazia muito isso com Ajax mas to tentando aprender no Javascript tbm sendo que Ajax tbm envolve Javascript até onde estou estudando rsrsrs mais com Ajax eu acho mais facil ! mais estamos estudando dessa forma tbm !! Aula TOP

[@franciscosousavieira7702]

Olá Professor Matheus Battisti, olha meus parabéns pelo projeto, parece simples, mas rico de informações .

[@MatheusBattisti]

showww Francisco, que bom que curtiu =) Se tu quiser fazer mais projetos interessantes e desafiadores com JS, React e outras tecnologias, te convido a conhecer a minha plataforma de cursos: horadecodar.com.br/comunidade-hora-de-codar/

[@Tomita84]

Que didática sensacional!!! Parabens! Aprendendo muito com seus vídeos!

[@MatheusBattisti]

valeu Tomita!

[@jailtonmendes8965]

Excelente, conteúdo muito enriquecedor com uma didática dessa, fica muito mais fácil. show de bola! valeu!!!

[@MatheusBattisti]

valeu Jailton!

[@marcoscappelli]

Show Matheus gostei muito. obrigado por compartilhar seu conhecimento.

[@MatheusBattisti]

de nada Marcos! =)

[@gunthersantos]

Muito Obrigado Matheus, sempre apresentando aulas com alta qualidade!!

[@MatheusBattisti]

valeuu Gunther =D

[@LucasFerreira-vd7mb]

Caraaa muito bom, perfeito o vídeo!

[@MatheusBattisti]

valeu Lucas!

[@mylifefinanceira]

amando o canal

[@MatheusBattisti]

Valeu Genildo

[@patrickmarcelinodasilva4960]

Boa noite, cara excelente como sempre

[@MatheusBattisti]

valeu Patrick!

[@munirarabi5397]

seus vídeos são perfeitos! sério msm, parabéns cara

[@MatheusBattisti]

valeu Munir! =)

[@fernandonogueira2291]

Excelente, professor! Obrigado!

[@MatheusBattisti]

valeu Fernando!

[@danilohenrique316]

Como sempre, Excelente!!👏👏👏

[@AdnanSoffiatti]

Boaaa, irei fazer esse projeto. Gostei muito da sua didática, fiz o curso de javascript e estou fazendo o de node.js, mas já comprei outros cursos seus. Seria uma boa subir essas aulas práticas nos seus cursos, vai enriquecer ainda mais eles

[@MatheusBattisti]

partiu Adnan, obrigado pelo feedback e pela dica tb hehe =D

[@ericksilveriodesigntecnolo1001]

Excelente projeto como sempre!!

[@MatheusBattisti]

valeu Erick!

[@Lua00001]

Muito obrigada pela aula, professor. Aprendi muito com você!!!

[@TheDigaorlc]

Você é fera prof , sucesso !!!

[@brunocorrea_br]

vlw mais uma vez Matheus!!! :D

[@MatheusBattisti]

De nada Bruno

[@anselmonascimento3324]

Excelente aula parabéns!!!

[@MatheusBattisti]

valeu Anselmo!

[@davia.fernandes5957]

Super curtir. Top

[@MatheusBattisti]

valeu Davi!

[@marcoantoniocamargobarral3098]

Parabéns pela aula!

[@valtercouto]

Parabéns Matheus Battisti muito bom o conteúdo. Poderia anotar ai para um próximo curso um cusro de SEO para paginas conforme forem sendo carregada.... Obrigado.

[@MatheusBattisti]

opa Valter, obrigado pela sugestão! =)

[@matealves]

Excelente conteúdo professor, muito obrigado!

[@VictorAlmeidaDev]

Sensacional!

[@fernandofurlaneto9223]

muito obrigado salvou de mais

[@tudoprajr36]

Muito Top

[@MatheusBattisti]

valeu Romulo!

[@madness3692]

porque em 32:47 , voce usou #order-form-container select ? se nao tinha nenhum select em HTML?

[@victorhugotavareslima9108]

Muito bom

[@MatheusBattisti]

valeu Victor!

[@IreneuGamer]

Salve prof, fiquei com uma duvida sobre esse video, no mnuto 56:06 o if para pegar o erro da api compara o dado boleean , so q entre aspas n fez sentido pra mim e nao tava funcionando assim cmg eu coloquei sem aspas e funciono.

[@D3m01idor]

o meu camarada, me salvou.. passei horas nesse trecho tb.. realmente faz mais sentido da forma como vc mencionou, do jeito q ta no video esta como uma string.. agr como o professor fez funcionar dessa forma é um misterio...

[@IreneuGamer]

@@D3m01idor provavelmente a ide na época entendia ou algo assim kkkkk

[@lendel-off]

@@D3m01idor tbm achei estranho, mas parece que a API realmente retorna um "erro" em string,pelo menos é o que aparece no console

[@user-bh2ly3qi3t]

Slc até aqui no KZbin os exercícios dele saem totalmente diferentes...

[@adrian-4767]

Matheus Battisti Qual é a data provisória do calendário para você lançar um novo curso na Udemy? Uma data aproximada.

[@MatheusBattisti]

Oi Adrian, ainda não tem previsão

[@adrian-4767]

@@MatheusBattisti Qual será o tema do novo curso?

[@hanzobrazil]

é possivel fazer isso com o mundo interior? estou trabalhando com internacional. e não consigo achar a api

[@rafael98php]

Fala professor tudo bem ? Fiquei curioso como faz esse tipo de formulario com 3 ou mais passos. Vc poderia trazer pra gente ?

[@atschaves]

Muito bom Matheus! Encontrei um impedimento na hora de colar um CEP. Ele fica lá processando e processando. Pelo codigo só digitos deveriam estar passando para a API do CEP.

[@atschaves]

Ao colar um CEP com traço, ex.: 40243-380

[@D3m01idor]

56:29 - esse if não esta funcionando.. o loader continua rodando infinitamente.. ja revisei o cod. e ta tudo certo, mais alguem esta com esse problema? to travado nessa parte...

[@kaiocoutinho4703]

Tira as aspas do true, coloca somente (data.erro === true)

[@madness3692]

o display: flex e display: grid, serve para qualquer navegador da web? valeu pelo conteudo, gratidao!

[@Maria-xl6fn]

Pode fazer na Shopify?

[@AllGutemberg]

Done...

[@MatheusBattisti]

boa!

[@MegaMac30]

Eu acho que o curso seria mais didático se o Matheus colocasse os nomes dos atributos em português ao invés de inglês. Como ele cria atributos com nomes em inglês eu fico confuso em saber se aquele atributo ou classe é nativa da biblioteca ou da linguagem de programação ou se aquele atributo foi criado por ele.

[@matheusduarte261]

Alguém mais está tendo o problema da página ficar recarregando toda vez que clica no botão?

[@matheusduarte261]

Respondendo minha própria pergunta: só coloca o type 'button' no botão de Cadastrar. Estava como 'submit'