Pokedex

English

Description

The "Pokedex" is a project developed entirely in pure JavaScript, aimed at emulating a Pokedex from the Pokémon world. This project allows users to search for approximately 650 Pokémon in their default and shiny forms. Searches can be made through interactive navigation to the next or previous Pokémon, by the Pokémon's name, or by a unique number assigned to each Pokémon.

Technologies Used

• JavaScript: Usage of the Fetch API for asynchronous data fetching, advanced DOM manipulation.
• Sass: Used to create a responsive and visually cohesive experience across different devices with advanced styling techniques.
• HTML: Structured with HTML5 for better accessibility and semantics.

Features

• Search Section: An interactive search section that fetches Pokémon data from the API upon submitting a search query via an "Enter" key press.
• Animated Pokémon: Features well-centered, animated Pokémon sprites that enhance user engagement.
• Responsive and Aesthetic Design: A responsive layout that works on all devices, with a color scheme that fits the Pokémon theme perfectly.

Challenges and Learnings

This project was particularly interesting and educational as it allowed me to enhance my skills in several technical areas, including:

• Making API requests and handling asynchronous JavaScript.
• Advanced DOM manipulation techniques for dynamic content updates.

How to Use

To use the "Pokedex", follow the steps below:

1. Clone the repository:

   git clone https://github.com/EngDann/Pokedex.git

2. Access the project folder:

   cd Pokedex

3. Open the project:

   You can open the project in any web browser of your choice. If using Visual Studio Code, you might use the Live Server extension to view the project live.

4. Search for a Pokémon:

   In the search section on the page, type the name or number of the Pokémon you wish to view and press "Enter" to perform the search.

The project does not require the installation of additional dependencies, as it is entirely based on HTML, CSS (Sass), and pure JavaScript.

Video

Video.mp4

Contributions

Your contributions are very welcome! If you have suggestions for improving this project, follow these steps to contribute:

1. Fork the project:

   Create a fork of the project to your GitHub account clicking on the "Fork" button located at the top right corner of the repository page.

2. Clone the fork:

   git clone https://github.com/your-github-username/Pokedex.git

3. Create a new branch:

   git checkout -b your-branch-name

4. Make your changes:

   Modify, add, or remove whatever you think is necessary in the project.

5. Commit your changes:

   git commit -m "Add a descriptive message here"

6. Push to GitHub:

   git push origin your-branch-name

7. Create a Pull Request:

   On GitHub, go to the original repository page you forked. Click on "Pull Request" and then "New Pull Request". Select your branch and click "Create Pull Request". Add a description of the changes you made and submit.

Please make detailed descriptions in your commits and pull requests to facilitate the review of your contributions.

Credits

• Designed and developed by EngDann.
• Icons and Pokémon data provided by the respective copyright holders.

Contact

To get in touch with me, feel free to:

• Send an email to [email protected]
• Connect via LinkedIn: Danilo de Melo Ribeiro

License

This project is licensed under the MIT License. This means you are free to use, copy, modify, and distribute the project, provided you give appropriate credit.

Portuguese

Descrição

A "Pokedex" é um projeto desenvolvido inteiramente em JavaScript puro, com o objetivo de emular uma Pokedex do mundo Pokémon. Este projeto permite aos usuários pesquisar aproximadamente 650 Pokémon em suas formas padrão e brilhante. As buscas podem ser realizadas através da navegação interativa para o próximo ou anterior Pokémon, pelo nome do Pokémon ou por um número único atribuído a cada Pokémon.

Tecnologias Utilizadas

• JavaScript: Uso da Fetch API para buscas de dados assíncronas, manipulação avançada do DOM.
• Sass: Utilizado para criar uma experiência responsiva e visualmente coesa em diferentes dispositivos com técnicas de estilização avançadas.
• HTML: Estruturado com HTML5 para melhor acessibilidade e semântica.

Funcionalidades

• Seção de Pesquisa: Uma seção interativa de pesquisa que busca dados do Pokémon da API ao submeter uma consulta de pesquisa através de um pressionamento de tecla "Enter".
• Pokémon Animados: Apresenta sprites de Pokémon bem centralizados e animados que aumentam o engajamento do usuário.
• Design Responsivo e Estético: Um layout responsivo que funciona em todos os dispositivos, com um esquema de cores que se encaixa perfeitamente no tema Pokémon.

Desafios e Aprendizados

Este projeto foi particularmente interessante e educativo, pois me permitiu aprimorar minhas habilidades em várias áreas técnicas, incluindo:

• Realização de solicitações de API e manipulação de JavaScript assíncrono.
• Técnicas avançadas de manipulação do DOM para atualizações dinâmicas de conteúdo.

Como Usar

Para usar a "Pokedex", siga os passos abaixo:

1. Clone o repositório:

   git clone https://github.com/EngDann/Pokedex.git

2. Acesse a pasta do projeto:

   cd Pokedex

3. Abra o projeto:

   Você pode abrir o projeto em qualquer navegador web de sua escolha. Se estiver usando o Visual Studio Code, pode usar a extensão Live Server para visualizar o projeto ao vivo.

4. Pesquise por um Pokémon:

   Na seção de pesquisa na página, digite o nome ou número do Pokémon que deseja visualizar e pressione "Enter" para realizar a busca.

O projeto não requer a instalação de dependências adicionais, pois é totalmente baseado em HTML, CSS (Sass) e JavaScript puro.

Vídeo

Video.mp4

Contribuições

Suas contribuições são muito bem-vindas! Se você tiver sugestões para melhorar este projeto, siga estes passos para contribuir:

1. Faça um fork do projeto:

   Crie um fork do projeto para sua conta no GitHub clicando no botão "Fork" localizado no canto superior direito da página do repositório.

2. Clone o fork:

   git clone https://github.com/seu-nome-de-usuario-no-github/Pokedex.git

3. Crie uma nova ramificação:

   git checkout -b nome-da-sua-ramificação

4. Faça suas alterações:

   Modifique, adicione ou remova o que achar necessário no projeto.

5. Faça commit das suas alterações:

   git commit -m "Adicione uma mensagem descritiva aqui"

6. Envie para o GitHub:

   git push origin nome-da-sua-ramificação

7. Crie um Pull Request:

   No GitHub, vá à página do repositório original que você fez fork. Clique em "Pull Request" e depois em "Novo Pull Request". Selecione sua ramificação e clique em "Criar Pull Request". Adicione uma descrição das alterações que você fez e envie.

Por favor, faça descrições detalhadas em seus commits e pull requests para facilitar a revisão de suas contribuições.

Créditos

• Desenvolvido por EngDann.
• Ícones e dados dos Pokémon fornecidos pelos respectivos detentores dos direitos autorais.

Contato

Para entrar em contato comigo, sinta-se à vontade para:

• Enviar um e-mail para [email protected]
• Conectar-se via LinkedIn: Danilo de Melo Ribeiro

Licença

Este projeto está licenciado sob a Licença MIT. Isso significa que você é livre para usar, copiar, modificar e distribuir o projeto, desde que forneça o devido crédito.