Skip to content

Construindo uma Pokedex a partir da linguagem de programação JavaScript. Utilizando das linguagens HTML e CSS para listagem de pokémon e integrando com a PokeAPI.

Notifications You must be signed in to change notification settings

YannMartins/PokedexComJavaScript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 

Repository files navigation

Pokédex com JavaScript

JavaScript HTML5 CSS3

🌐 Descrição do Projeto

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.

html_16x16 Início com HTML

Criando um índex que servirá como base para toda a sequência do projeto, utilizando da linguagem de programação HTML.

Resultado:

image

css_16x16 Adicionando a estilização em CSS

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.

Resultado:

image image

css_16x16 Estilização da 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.

Resultado:

image image

javascript_16x16 Consumo da PokeAPI

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.

Resultado:

Screenshot_5 Screenshot_2

javascript_16x16 Adicionando os Pokémon dinamicamente

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.

Resultado:

Screenshot_1

🚧 Toques Finais

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.

Resultado:

Screenshot_4 image

🏁 Resultado Final

Pokedex.mp4

👨🏾‍💻 Autor


Yann Martins de Sousa

About

Construindo uma Pokedex a partir da linguagem de programação JavaScript. Utilizando das linguagens HTML e CSS para listagem de pokémon e integrando com a PokeAPI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published