Pokémon Card Display

This project is a web-based Pokémon card display that dynamically fetches and presents Pokémon information using the PokéAPI. The cards showcase various details, including name, type, stats, abilities, and an image. Each card has a styled type badge that appears as a button at the bottom-right of the image.

Features

Fetches real-time Pokémon data from the PokéAPI
Displays Pokémon name, image, type, stats, and abilities
Styled cards with distinct color schemes based on Pokémon type
Responsive design with grid layout adjustments for different screen sizes

Technologies Used

HTML: Structure of the page
CSS: Styling and layout
JavaScript (ES6+): Fetching API data and dynamically generating content

Installation & Usage

1. Clone the Repository

git clone https://github.com/codelikeagirl29/eevee-evolutions.git
cd eevee-evolutions

2. Open the Project

Simply open index.html in your web browser.

3. Modify the Pokémon List

If you want to add or remove Pokémon, edit the pokemonNames array in script.js:

const pokemonNames = [
  "eevee",
  "vaporeon",
  "jolteon",
  "flareon",
  "espeon",
  "umbreon",
  "leafeon",
  "glaceon",
  "sylveon",
];

File Structure

/pokemon-card-display
│── index.html         # Main HTML file
│── styles.css         # Styles for the cards and layout
│── script.js          # JavaScript file fetching and rendering Pokémon data
│── README.md          # Project documentation (this file)

Example Screenshot

Future Improvements

Add a search/filter function for finding specific Pokémon
Display multiple types for dual-type Pokémon
Improve animations and UI interactions

Credits

PokéAPI (pokeapi.co) for providing Pokémon data
Styled and developed by [Your Name]

License

This project is open-source and available under the MIT License.

Contributions

Feel free to fork, submit pull requests, or suggest improvements!

🚀 Enjoy catching 'em all! 🎮

CodeLikeAGirl29/eevee-evolutions