Construindo uma Pokédex a partir da linguagem de programação JavaScript. Utilizando das linguagens HTML/CSS para listagem de Pokémon e integrando com a PokeAPI. Seguindo a Trilha JS Developer disponibilizada pela DIO
através do Bootcamp Potência Tech Angular Developer - Powered by iFood
.
Criando um índex que servirá como base para toda a sequência do projeto, utilizando da linguagem de programação HTML.
A partir do normalize CSS, foi iniciado o processo de organização do projeto, adicionando tecnologias da linguagem de programação CSS para estilizar a listagem de Pokémon.
Após concluir a estilização inicial através do código CSS, foi adicionado a imagem do Pokémon e os tipos do Pokémon, afim de tornar o layout mais responsivo para diversas resoluções, foi serapado os estilos do código CSS como demonstrado acima.
Consumindo a PokeApi, nós conseguimos fazer requisições que possibilitam trazer o conteúdo de cada Pokémon e com isso transformar essa lista de Pokémon em uma lista HTML através do JavaScript, para assim ficar mais fácil de fazer a manipulação do nosso código.
Em seguida, revisamos o código para adicionar assim os próximos Pokémon, através do consumo da lista em HTML, adicionando os seus tipos, nomes, numeração e imagens de forma dinâmica.
Aperfeiçoando as mecânicas já disponíveis no nosso código, convertemos o modelo do PokeApi para nosso modelo e adicionamos um botão de paginação, que permite vermos de 10 em 10 Pokémon. Além disso, adicionamos mais dinamismo para o código CSS, de forma que reaja de acordo com o Pokémon listado em questão.
Pokedex.mp4
Yann Martins de Sousa |
---|