https://github.com/victor-lis/viacep
https://github.com/victor-lis/viacep
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/viacep
- Owner: Victor-Lis
- Created: 2022-12-11T00:30:25.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-07T02:11:20.000Z (almost 2 years ago)
- Last Synced: 2024-10-05T12:41:04.723Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://viacep-api.netlify.app/
- Size: 77.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ViaCep API
Esse é um projeto simples usando a [ViaCep API](https://viacep.com.br/), embora sendo simples foi meu 2° ou 3° contato com requisições HTTP e também minha 2° ou 3° vez recebendo dados da Web, até então (10/12/2022, data da criação da pasta do projeto) não havia tido tanto contado com tais feito, realizei esse projeto pois um amigo meu que estuda na Etec e faz DS(Desenvolvimento de Sistemas) assim como eu, estava com dificuldades na matéria de PW(Programação Web), então fiz esse projeto para ajudá-lo.
## Desafios
Acredito que meus principais desafios nesse projeto foram:
- Uma das minhas primeiras vezes usando display: "flex" e medidas responsivas.
- Ainda não tinha tanto conhecimento sobre trabalhar com Arrays ou Objetos então foi um desafio trabalhar com o método "map".
- Preencher a tag select com os nomes dos estados como texto e value suas siglas / abreviações.
## Aprendizados
Por final aprendi algumas coisas interessantes como:
#### Primeiras vez usando medidas responsivas como "vh" e "%".
```css
main{
min-height: 100vh;
width: 100%;
background-color: #1e1e1e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
...
.inputs{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4%;
margin: 2% 0;
width: 90%;
}
```
#### Primeiras vezes usando "display: flex".
```css
.respostas{
width: 96%;
padding: 02%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid #fff;
max-width: 450px;
border-radius: 10px;
margin: 15px 0;
padding: 2% 0;
color: #fff;
}
...
.cards{
width: 85%;
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 2%;
gap: 2%;
align-items: center;
}
```
#### Preencher a tag select ao carregar a página.
Nesse caso eu chamo uma função que preenche a tag select mapeando um array e usando o método "innerHTML".
```javascript
function preencherSelect() {
let estados = ["Acre", "Alagoas", "Amapá", "Amazonas", "Bahia", "Ceará", "Distrito Federal", "Espírito Santo", "Goiás", "Maranhão", "Mato Grosso", "Mato Grosso do Sul", "Minas Gerais", "Pará", "Paraíba", "Paraná", "Pernambuco", "Piauí", "Rio de Janeiro", "Rio Grande do Norte", "Rio Grande do Sul", "Rondônia", "Roraima", "Santa Catarina", "São Paulo", "Sergipe", "Tocantins"]
let sigla = ["AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO"];
estados.map((estado, index) => {
document.getElementById("estado").innerHTML += `${estados[index]}`
})
}
```
# Resultado
## Autores
- [@Victor-Lis](https://github.com/Victor-Lis)