Interactive Pokedex

An interactive Pokedex application built with HTML, Tailwind CSS, and JavaScript. This project integrates various Pokémon APIs to provide a comprehensive and interactive experience for Pokémon enthusiasts.

APIs Used

1. Pokémon API (PokeAPI)

   • Description: Provides detailed information about Pokémon, including their stats, types, abilities, and evolutionary chains.
   • Endpoint: https://pokeapi.co/api/v2/pokemon/{id or name}
   • Documentation: PokeAPI Documentation

2. Pokémon TCG API

   • Description: Provides information about Pokémon Trading Card Game cards, including images and stats.
   • Endpoint: https://api.pokemontcg.io/v2/cards?q=name:{name}
   • Documentation: Pokémon TCG API Documentation

Features

• Search Functionality: Search for Pokémon by name.
• Pokémon Details: View detailed information about each Pokémon, including their types, stats, and abilities.
• Evolution Chain: Visual representation of a Pokémon's evolution chain.
• Trading Cards: Display related Pokémon Trading Card Game cards.
• Pokémon Quiz: Interactive quiz to test your knowledge about Pokémon types.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/interactive-pokedex.git

2. Navigate to the project directory:

   cd interactive-pokedex

3. Open index.html in your browser to view the application.

Usage

1. Search for a Pokémon: Use the search bar to find a Pokémon by its name. The application will display a list of matching Pokémon.
2. View Pokémon Details: Click on a Pokémon card to view detailed information about it, including its stats, abilities, and evolution chain.
3. Explore Pokémon TCG: See related Pokémon Trading Card Game cards in the details section.
4. Take the Pokémon Quiz: Test your knowledge by taking the interactive quiz.

Research and Resources

This project was developed using various resources and research materials:

• PokeAPI: Used for fetching Pokémon data.
• Pokémon TCG API: Used for fetching Pokémon Trading Card Game data.
• MDN Web Docs: For general web development references and best practices.
• W3C: For HTML and CSS validation guidelines.

Accessibility

This application is designed with accessibility in mind:

• ARIA labels: Used for enhancing screen reader accessibility.
• Keyboard Navigation: Full keyboard navigation support.
• High Contrast: Ensures readability for users with visual impairments.

Interactive live site