Dispositivo Pokédex do anime "Pokémon". Seja em casa no seu desktop, ou na rua com o celular na mão, você pode encontrar o seu Pokémon por aqui!
O corpo da Pokédex foi feito inteiramente com HTML e CSS "puro", exceto a floresta no centro da Pokédex, que é uma imagem.
Inicialmente, a minha ideia era criar uma Pokédex para praticar meus conhecimentos de JavaScript. Mas, depois de pensar um pouco, decidi fazer primeiramente a "carcaça" da Pokédex somente com HTML e CSS, assim eu poderia concretizar o que eu já domino dessas tecnologias.
Observação: Eu desenvolvi grande parte da aplicação sem copiar código de algum tutorial. Destaco que me inspirei em um vídeo do Youtube (créditos aqui), mas me esforcei bastante para diferenciar o meu projeto dos outros, através da criação de features que não estavam contidas no projeto do tutorial.
Versão HTML & CSS: clique aqui.
Versão HTML, CSS & JavaScript: clique aqui.
- Design responsivo.
- Integração de API (PokéAPI).
- Botão de power para ligar/desligar a Pokédex.
- Animação ao ligar a Pokédex.
- Campo de busca para encontrar um Pokémon.
- Botões para encontrar o Pokémon anterior ou posterior.
- Display com os status (vida, dano, defesa etc.) do Pokémon encontrado.
Para desenvolver a Modern Pokédex, eu tive que consumir a PokéAPI pelo método fetch() do JavaScript. Utilizada a requisição HTTP "GET".
Existem dois jeitos de encontrar um Pokémon: pelo nome ou pelo ID.
Você pode procurar, por exemplo, o pokémon de número 82 (sem zero à esquerda), ou com um zero como primeiro caractere. Exemplo: 082.
Os formatos aceitos são:
- Letras maiúsculas.
- Letras minúsculas.
- Letras maiúsculas misturadas com minúsculas.
Aproveitando que você chegou ao fim desta documentação, eu gostaria de te dizer que eu usei o mesmo estilo de fontes e input (campo de busca) do projeto do @Manual do Dev. Além disso, segui as instruções do vídeo dele para desenvolver a funcionalidade básica de consumir a PokéAPI. Por fim, a minha inspiração para desenvolver a "carcaça" da Pokédex veio da imagem que ele utilizou no projeto.
Vídeo: "Como criar uma Pokedex com HTML, CSS e JavaScript"
Gostou do meu projeto? Então me acompanhe nas redes sociais, principalmente no LinkedIn, para ficar por dentro das minhas últimas aplicações!
Developed by Guilherme Rocha - 2022.