Skip to content

teknium1/ez-pokedex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

✨🔴 Interactive Animated Pokedex ⚪✨

** Gotta Catch 'Em All... Interactively! (Gen 1 - First 50) **

Pokedex Demo GIF

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.


🚀 Features Showcase 🚀

  • 📋 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/await for 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.

🛠️ Tech Stack & Tools 🛠️

HTML5 CSS3 JavaScript PokeAPI Chart.js Google Fonts


🚦 Getting Started 🚦

Want to run this Pokedex on your local machine? Follow these simple steps:

  1. Clone the Repository:

    git clone https://github.com/teknium1/ez-pokedex.git
  2. Navigate to the Directory:

    cd ez-pokedex
  3. Open index.html: Simply open the index.html file in your favorite web browser (like Chrome, Firefox, Edge, Safari).

    • Tip: On most systems, you can just double-click the file.
  4. Explore! 🎉 Start clicking on Pokémon and exploring their stats!


📁 File Structure 📁

.
├── 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! 😉

🌐 Key APIs & Libraries 🌐

  • 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.

💡 Potential Future Enhancements 💡

  • 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).

🙌 Contributing 🙌

Contributions, issues, and feature requests are welcome! Feel free to check the issues page (if you plan to use it).

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📜 License 📜

Distributed under the MIT License.


Thanks for checking out the Interactive Pokedex!

🔴⚪🔴

About

gemini 2.5 made it

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors