** Gotta Catch 'Em All... Interactively! (Gen 1 - First 50) **
A dynamic web-based Pokedex featuring the first 50 Pokémon from Generation 1, brought to life with data from the PokeAPI, smooth animations, and insightful stat visualizations.
Dive into the world of Pokémon like never before! This project isn't just a list; it's an interactive experience. Click on your favorite Kanto region starter, witness their animated sprite wiggle, and uncover their secrets with detailed stats and descriptions.
- 📋 Pokémon Grid: Displays the first 50 Pokémon in a clean, responsive card grid.
- ✨ Animated Sprites: Features Generation 5 (Black/White) style animated GIFs for Pokémon on cards and in the detail view (with fallbacks!).
- 🖱️ Interactive Cards: Click any Pokémon card to reveal a detailed modal view.
- 📊 Dynamic Stats Chart: Visualizes base stats (HP, Attack, Defense, Sp. Atk, Sp. Def, Speed) using a sleek Chart.js horizontal bar chart.
- 🔍 Detailed Information: Access essential data for each Pokémon:
- 🆔 National Pokedex Number
- 🏷️ Name
- 🎨 Types (with corresponding color badges)
- 📏 Height & Weight
- 📖 Flavor Text Description (from the games!)
- 🖼️ High-Quality Artwork / Sprites (prioritizes animated, falls back gracefully)
- 💨 Smooth Transitions & Animations:
- Hover effects on cards.
- Modal fade-in/scale-up animation.
- Subtle pulse animation on the detail view sprite.
- Loading indicator with a spinning Pokeball.
- 📱 Responsive Design: Adapts beautifully to various screen sizes, from desktops to mobile phones.
- ⚙️ Efficient Data Handling: Uses
async/awaitfor fetching data and includes a simple cache to minimize redundant API calls. ⚠️ Error Handling: Includes fallbacks for images and basic error messages for data fetching issues.
Want to run this Pokedex on your local machine? Follow these simple steps:
-
Clone the Repository:
git clone https://github.com/teknium1/ez-pokedex.git
-
Navigate to the Directory:
cd ez-pokedex -
Open
index.html: Simply open theindex.htmlfile in your favorite web browser (like Chrome, Firefox, Edge, Safari).- Tip: On most systems, you can just double-click the file.
-
Explore! 🎉 Start clicking on Pokémon and exploring their stats!
.
├── index.html # Main HTML structure of the Pokedex page
├── style.css # CSS for styling, layout, and animations
├── script.js # JavaScript for API fetching, interactivity, and chart generation
└── README.md # You are here! 😉
- PokeAPI (v2): The incredible source of all Pokémon data used in this project. Huge thanks to the PokeAPI team!
- Chart.js: Used for creating the beautiful and responsive stats visualization chart.
- Pagination/Infinite Scroll: Load more than the first 50 Pokémon.
- Search Functionality: Allow users to search for Pokémon by name or ID.
- Filtering/Sorting: Filter by type, sort by ID, name, or stats.
- Evolution Chains: Display the evolution line for each Pokémon.
- Sound Effects: Add iconic Pokémon cries on click or hover.
- Local Storage: Save favorite Pokémon or user settings.
- Progressive Web App (PWA): Make it installable and usable offline.
- Different Animation Styles: Option to switch between sprite styles (e.g., static Gen 1 vs. animated Gen 5).
Contributions, issues, and feature requests are welcome! Feel free to check the issues page (if you plan to use it).
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License.
Thanks for checking out the Interactive Pokedex!
🔴⚪🔴