Estou tentando implementar o que está sendo ensinado nesse artigo da formação front-end mas não sei exatamente onde eu coloco o código que está sendo ensinado no passo a passo. Alguém poderia dar uma luz? Obrigado
Estou tentando implementar o que está sendo ensinado nesse artigo da formação front-end mas não sei exatamente onde eu coloco o código que está sendo ensinado no passo a passo. Alguém poderia dar uma luz? Obrigado
Oi Rafael!
Os arquivos inicias so projeto estão neste link e os arquivos CSS estão aqui. Depois de baixar os dois arquivos e extraí-los, copie e cole os arquivos CSS na pasta asserts\stylesheets\stilize
.
Você pode colocar o código javascript ensinado no post dentro de uma tag script
no final do body
no arquivo HTML, desta maneira:
<body>
// código inicial da aula
<script>
// código ensinado aqui
</script>
</body>
Após ler o artigo, percebi que são necessários 2 passos adicionais para que o código funcione corretamente:
buscaCep
document.querySelector('.o-button--gary').addEventListener('click', buscaCep);
type="button"
no botão que com o ícone de globo// linha 19 do index.html
<button class="o-button--gary" type="button"><i class="icon-globe"></i></button>
Como o botão está dentro de um form
, seu type
padrão é submit
e isso causaria um refresh na página ao ser clicado. Desta forma os campos seriam preenchidos com os dados, mas logo em seguida a página seria recarregada, limpando todos os campos. Sendo assim, a troca para type="button"
impede esse comportamento indesejado.Espero ter ajudado! Se tiver mais alguma dúvida pode postar aqui! :)