Don't speak Portuguese? Click here to view this page in English.

Pokédex - Imersão Dev com Google Gemini

Status Concluded Badge

Tela de Login

📂 Descrição

Esse projeto foi inspirado no clássico universo Pokémon e é uma aplicação simples, mas poderosa, que permite encontrar rapidamente as informações que você precisa sobre os Pokémon da primeira geração.

  • Pesquisa Inteligente: Basta digitar o nome ou o tipo de um Pokémon na barra de pesquisa, e a aplicação faz uma varredura em um banco de dados para encontrar os detalhes do Pokémon.

  • Exibição Dinâmica: Se o Pokémon ou o tipo for encontrado, a aplicação exibe um card interativo, contendo seu nome, foto, número, tipo, HP, ataque, defesa, velocidade, altura, peso, habitat e evoluções. Caso o Pokémon não seja encontrado, você receberá uma mensagem informando que não houve correspondências.

Este projeto é uma maneira divertida e prática de acessar informações detalhadas sobre os primeiros 151 Pokémon, proporcionando uma experiência fluida e visualmente agradável.

💻 Executando o projeto

  1. Clone o repositório: Faça um clone desse repositório no seu computador.
  2. Abra o arquivo index.html: Abra o arquivo index.html no seu navegador favorito.
  3. Comece a pesquisar: Digite o nome ou do Pokémon tipo de Pokémon e veja a mágica acontecer!

📝 Estrutura do Projeto

imersao-dev-google-gemini/
│
├── datasets/            # Pasta contendo os conjuntos de dados.
│   ├── dados.js         # Os dados dos Pokémons aqui. Você pode adicionar mais dados aí se quiser.
│
├── imagens/             # Pasta contendo as imagens.
│   ├── logo.jpg         # Imagem utilizada para o icon.
│   ├── pokebola.jpg     # Imagem utilizada no background-image do body.
│
├── app.js               # A lógica da pesquisa está aqui. Se você quiser adicionar mais funcionalidades, é só editar esse arquivo.
│
├── index.html           # A estrutura básica da página, como os títulos, botões e onde os resultados vão aparecer.
│
├── README-en.md         # Documentação do projeto em inglês
│
├── README.md            # Documentação do projeto em português
│
└── style.css            # O design da página está aqui. Se você quiser mudar as cores ou a fonte, é só editar esse arquivo.

💨 Layout do projeto

Gif

📚 Tecnologias usadas:

HTML5 CSS3 JavaScript

🙋‍♂️ Desenvolvedores


Mateus Paiva

Alura