Pokemon Explorer is an interactive web application that allows you to dive into the fascinating world of Pokémon using a free, open-source API. Powered by the official PokéAPI, this project dynamically retrieves Pokémon data and presents it with a sleek, modern, and responsive design built with HTML, CSS, JavaScript, and Bootstrap 5.
- Responsive Design: Enjoy a seamless experience on any device, whether you're on desktop, tablet, or mobile.
- Technology Badges: Display the official badges for HTML5, CSS3, JavaScript, and Bootstrap.
- Pokémon Filtering: Easily filter Pokémon by various criteria (e.g., type, or show all) to find your favorites.
- Pagination: Efficiently navigate through multiple pages of Pokémon data.
- Dynamic Modal: Click on any Pokémon card to launch a modal window that reveals detailed information, including:
- Name
- Primary Type
- Abilities
- Base Stats
- Height and Weight
- Sprite Image
- Additional notable details
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
This project runs directly in any modern web browser without any additional dependencies. For development purposes, using a code editor with live preview capabilities (such as Visual Studio Code with the Live Server extension) is highly recommended.
-
Clone the repository git clone https://github.com/bocaletto-luca/Pokemon-Database.git cd pokemon-explorer
-
Launch the Application
- Open the
index.html
file in your web browser. - Alternatively, use a live-reload server from your code editor to view changes in real time.
- Data Fetching: The application uses the Fetch API to retrieve Pokémon data from the PokéAPI, processing the JSON response to dynamically generate cards for each Pokémon.
- Filtering & Pagination: Users can filter Pokémon based on certain criteria and navigate through the pages of results using a simple, intuitive pagination system.
- Dynamic Modal Display: Clicking on a Pokémon card opens a modal window that provides an in-depth look at the Pokémon's attributes and statistics.
Contributions are always welcome! If you'd like to enhance the project or add new features, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or fix: