Site Pokédex

Criar a versão 2.0 da Pokédex Dinâmica

O projeto é um criar um site da pokédex contendo todos os pokemons. O intuito de trabalhar com requisição de API, aplicando os temas abordados ao longo das aulas de Javascript da plataforma da Digital Innovation One.

O site da Pokédex vem como desafio para os alunos da plataforma testarem seus conhecimentos e colocarem em prática os recursos de HTML, CSS e Javascript abordados nos cursos.

🏆 Desafio 2.0

Na Versão 1.0 - O professor guiou e ensinou como funciona uma requisição de API, utilizamos a PokeAPI, com isso o desafio foi elaborar uma forma de requisitar e apresentar os detalhes dos pokemons.

Nessa primeira versão fiz em um modelo modal para apresentar os detalhes (Peso/ Altura e Movimentos) e completar o desafio

Na Versão 2.0 - Revi as Aulas de Protocolos HTTP e o ensinamentos sobre Requisição fetch(url) de API, para melhor entendimento do conteudo, e comecei a elaborar uma forma de requisitar mais detalhes dos pokemons como a lista de status base.

Na segunda versão tirei o modal e coloquei efeito de flip nos card, a parte de tras do card traz os detalhes dos pokemons

✨ Features 2.0

• Header com navegação de links profissionais
• Body e Containers com Animação Dinamica
• Cards animados com flip, aumento de escala e com informações/detalhes do pokemon
• Botão LoadMorePokemons (Carrega Mais Pokemons)
• Rodapé com links Profissionais.
• UI Responsiva

Features Versão 1.0 - Cards com info dos pokemons (Requisitado da PokeAPI) - Modal com mais detalhes dos pokemons (Requisitado da PokeAPI) - Botão LoadMorePokemons (Carrega Mais Pokemons) - UI Responsiva

📦 Recursos abordados

Recursos JavaScript:

• Variaveis e Operadores
• Estruturas Condicionais
• Funções
• Objetos e Classes
• Arrays e Estruturas de repetição
• Requisição API por fetch(url).then()
• Manipulação da DOM
• Adicionar/Remover Eventos

Recursos CSS:

• Fundamentos do CSS
• Grid Layout
• Flexbox
• Responsividade
• Pseudo-classes
• Transformações 2D e 3D
• Transições e animações
• Tratamento de campos inválidos no formulário

Recursos HTML:

• Importação de Fontes
• Importação de arquivos Javascripts
• Importação de arquivos CSS
• Add Icon na pagina
• Tags Semanticas aplicadas

🌈 Demonstração

Você pode acessar ao resultado final da Versão 2.0 clicando aqui.

Melhor funcionamento no Google Chrome mobile ou Desktop

Link do github page da versão 1.0 clique aqui

Link do repositório da versão 1.0 clique aqui

📌 Proximas Possiveis Atualizações 🌌

• Versão 3.0 : Colocar campo de busca e filtros para os pokemons

• Versão 4.0 : Mudar o conceito de paginação - Em vez de colocar mais pokemons, criar varias paginas com os demais pokemons

• Versão 5.0 : A verificar

💻 Paulo Henrique

  &nbs Paulo Henrique de Almeida Pinto
   GitHub | LinkedIn | My Curriculum

---