Skip to main content

​
Quickstart Guide

Get Pokémon Explorer running on your local machine in just a few steps. No build process, no npm install—just pure HTML, CSS, and JavaScript.
Pokémon Explorer is a static frontend application with zero dependencies. Simply open the HTML file in a browser and start exploring!

​
Quick Start

1

Clone the Repository

git clone https://github.com/mueses1/PokeApi.git
cd PokeApi
2

Open in Browser

Open index.html directly in your web browser:Option 1: Double-click the file
  • Navigate to the project folder
  • Double-click index.html
  • The app opens in your default browser
Option 2: Use a local server (recommended)
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js (if you have npx)
npx http-server
Then visit http://localhost:8000
3

Start Exploring

That’s it! The application loads and you can immediately:
  • Search for your favorite Pokémon
  • Filter by type, generation, or color
  • Click “Ver más” to see detailed stats
  • Click the 🔊 button to hear Pokémon cries
Using a local server instead of opening the file directly ensures all features work correctly, especially if you add custom fonts or external resources.

​
Exploring the Interface

The search bar supports multiple search patterns: 
pikachu
charmander
bulbasaur
Start typing and watch the autocomplete suggestions appear! The search requires at least 2 characters.

​
2. Type Filter

Filter Pokémon by their elemental type: 
<select id="typeFilter">
    <option value="">Elige el tipo</option>
    <option value="fire">Fuego</option>
    <option value="water">Agua</option>
    <option value="grass">Planta</option>
    <option value="electric">Eléctrico</option>
    <!-- 14 more types... -->
</select>
Available types:
  • Normal, Fire, Water, Electric, Grass, Ice
  • Fighting, Poison, Ground, Flying
  • Psychic, Bug, Rock, Ghost
  • Dragon, Dark, Steel, Fairy

​
3. Generation Filter

Explore Pokémon from specific game generations:

Gen I

Kanto (1-151)

Gen II

Johto (152-251)

Gen III

Hoenn (252-386)

Gen IV

Sinnoh (387-493)

Gen V

Unova (494-649)

Gen VI

Kalos (650-721)

Gen VII

Alola (722-809)

Gen VIII

Galar (810-905)

Gen IX

Paldea (906-1025)

​
4. Pokémon Cards

Each card displays rich information: 
// Card structure from logica.js:586
createPokemonCard(pokemon) {
    const card = document.createElement('div');
    card.className = 'pokemon-card';
    
    // Gradient background based on primary type
    const backgroundGradient = this.constants.typeColors[pokemon.types[0]];
    
    card.innerHTML = `
        <div class="pokemon-card-content">
            <div class="pokemon-image">
                <img src="${pokemon.image}" alt="${pokemon.name}">
                ${pokemon.cry ? `<button class="cry-button">🔊</button>` : ''}
            </div>
            <div class="pokemon-name">${pokemon.name}</div>
            <div class="pokemon-id">#${String(pokemon.id).padStart(3, '0')}</div>
            <div class="pokemon-types">...</div>
            <button class="toggle-info">Ver más</button>
            <div class="extra-info">...</div>
        </div>
    `;
    
    return card;
}
Card features:
  • Image: Official artwork from PokeAPI
  • Name & ID: Capitalized name with formatted ID
  • Type badges: Color-coded by type
  • Stats: HP, Attack, Defense, Speed
  • Abilities: Up to 3 abilities with Spanish translations
  • Physical info: Height, Weight, Base Experience
  • Extra data: Color indicator and habitat (when available)
The “Ver más” (Show more) toggle button only appears on mobile devices. On desktop, all information is visible by default.

​
Interactive Features

​
Hearing Pokémon Cries

1

Activate Audio

Click the 🔊 button once on any Pokémon card to enable audio
2

Play Sounds

After activation, hover over any 🔊 button to hear that Pokémon’s cry
// From logica.js:628
if (pokemon.cry) {
    const cryButton = card.querySelector('.cry-button');
    cryButton.addEventListener('click', (e) => {
        e.stopPropagation();
        this.playPokemonCry(pokemon.cry, cryButton);
        this.audioActivated = true;
    });
    cryButton.addEventListener('mouseenter', (e) => {
        if (this.audioActivated) {
            this.playPokemonCry(pokemon.cry, cryButton);
        }
    });
}
This two-step activation prevents unexpected audio playback while browsing.

​
Using the Interactive Tour

Click the “Guía Interactiva” button at the top to start a guided tour: 
<!-- From index.html:21 -->
<button id="startTour" class="tour-button">Guía Interactiva</button>
The tour highlights key features:
  1. Smart Search: How to search and use autocomplete
  2. Advanced Filters: Using type, generation, and other filters
  3. Pokémon Cards: Viewing stats and playing cries
  4. Pagination: Navigating through results

​
Pagination

Browse through 12 Pokémon at a time: 
// From logica.js:116
this.pokemonPerPage = 12;

← Anterior

Go to the previous page

Page Numbers

Jump directly to a specific page

Siguiente →

Go to the next page

​
Example Workflows

​
Find All Fire-Type Pokémon from Gen I

1

Select Type

Choose “Fuego” (Fire) from the Type Filter dropdown
2

Select Generation

Choose “Gen I - Kanto (1-151)” from the Generation Filter
3

Browse Results

See Charmander, Charmeleon, Charizard, Vulpix, Ninetales, Growlithe, Arcanine, Ponyta, Rapidash, Moltres

​
Search for Blue Water Pokémon

Step 1: Type in search bar: "agua azul"
Step 2: Press Enter or wait for auto-search
Step 3: View results filtered by water type and blue color

​
Explore Dragon Types

1

Filter by Type

Select “Dragón” from Type Filter
2

View Stats

Click “Ver más” on mobile or simply view on desktop
3

Compare

Notice the purple gradient background specific to Dragon types
Type-based background gradients make it easy to visually identify Pokémon types at a glance.

​
Performance Tips

First Load

Initial load fetches 24 Pokémon for instant display

Smart Caching

All fetched data is cached for instant re-filtering

Batch Loading

Large filters load in batches of 50 to prevent UI freeze

Lazy Details

Species data (color/habitat) loads on-demand
// From logica.js:281
const batchSize = 50;
for (let i = 0; i < needed.length; i += batchSize) {
    const batch = needed.slice(i, i + batchSize);
    const newPokemon = await Promise.all(
        batch.map(p => this.fetchPokemonDetails(p))
    );
}

​
Next Steps

Installation Guide

Set up a development environment and customize the app

Project Structure

Learn about the codebase architecture
Ready to dive deeper? Check out the Installation guide to set up your development environment and start customizing Pokémon Explorer.

Build docs developers (and LLMs) love

Get started for freeTalk to us