Skip to main content

​
Overview

The PokemonExplorer class is the core of the Pokémon Explorer application. It handles data fetching, search, filtering, pagination, and UI rendering for browsing over 1,300 Pokémon.

​
Constructor

const explorer = new PokemonExplorer();
Initializes the application with:
  • API configuration
  • Translation constants
  • State management
  • DOM element references
  • Event listeners
  • Initial data loading

​
Properties

​
API Configuration

​
API_BASE_URL
string
default:"https://pokeapi.co/api/v2"
Base URL for the PokéAPI endpoints

​
Constants

​
constants
object
Configuration object containing translation maps and settings

​
State Properties

​
currentPage
number
default:"1"
Current pagination page number
​
pokemonPerPage
number
default:"12"
Number of Pokémon displayed per page
​
allPokemon
Array<Pokemon>
Complete list of loaded Pokémon objects
​
filteredPokemon
Array<Pokemon>
Pokémon list after applying search/filters
​
pokemonById
Map<number, Pokemon>
Fast lookup map for Pokémon by ID
​
pokemonByName
Map<string, Pokemon>
Fast lookup map for Pokémon by name
​
audioActivated
boolean
default:"false"
Whether user has activated audio playback

​
DOM Elements

​
elements
object
References to key DOM elements

​
Core Methods

​
Data Loading

async loadInitialData()
Loads initial data required for the application:
  • Pokémon types
  • Color options
  • Habitat options
  • Populates filter dropdowns
  • Triggers initial Pokémon load
Returns: Promise<void>
async loadPokemon()
Loads the complete list of Pokémon names from the API (up to 1,302 Pokémon), then loads the first 24 Pokémon details for display.Returns: Promise<void>
async loadMissingPokemon(list, key = 'name')
Loads detailed data for Pokémon that haven’t been fetched yet. Uses batch processing (50 at a time) for performance.Parameters:
  • list (Array): List of Pokémon IDs or names to load
  • key (string): Either 'id' or 'name' to specify lookup type
Returns: Promise<void>
async fetchPokemonDetails(idOrName)
Fetches complete details for a single Pokémon from the API, including species data for color and habitat information.Parameters:
  • idOrName (number | string): Pokémon ID or name
Returns: Promise<Pokemon | null> - Pokémon object or null if not foundPokemon object structure:
{
  id: number,
  name: string,
  image: string,
  types: Array<string>,
  abilities: Array<string>,
  stats: { hp, attack, defense, speed },
  height: number,  // in meters
  weight: number,  // in kilograms
  baseExperience: number,
  cry: string | null,  // audio URL
  color: string | null,
  habitat: string | null
}

​
Search & Filtering

handleSearch(query)
Handles search input changes with debouncing (300ms). Updates suggestions and triggers search.Parameters:
  • query (string): Search input value
Returns: void
parseSmartSearch(query)
Parses a search query to identify multiple criteria (name, type, color, habitat, size, weight).Parameters:
  • query (string): Raw search query (e.g., “planta verde pequeño”)
Returns: object - Parsed criteria:
{
  name: string,
  type: string | null,
  color: string | null,
  habitat: string | null,
  size: string | null,
  weight: string | null
}

async performSearch(query)
Executes a search based on the query. Routes to smart search or name search depending on query content.Parameters:
  • query (string): Search query
Returns: Promise<void>
async applyFilters()
Applies all selected filter criteria (type, generation, color, habitat, size, weight) to the Pokémon list.Returns: Promise<void>

​
Display & UI

displayPokemon()
Renders the current page of filtered Pokémon as cards in the grid. Shows/hides the grid and no-results message as appropriate.Returns: void
createPokemonCard(pokemon)
Creates a complete DOM element for a Pokémon card with:
  • Image with loading states
  • Name and ID
  • Type badges
  • Expandable details (stats, abilities, physical attributes)
  • Audio cry button (if available)
Parameters:
  • pokemon (Pokemon): Pokémon object
Returns: HTMLElement - The card element
updatePagination()
Updates pagination controls based on the current page and total filtered results. Shows up to 5 page buttons at a time.Returns: void
populateFilters()
Populates all filter dropdowns with translated options from loaded data.Returns: void

​
Utility Methods

translate(key, translationMap, fallbackFormatter = null)
Translates a key using the specified translation map from constants.Parameters:
  • key (string): Key to translate
  • translationMap (string): Name of the translation map (e.g., ‘typeTranslations’)
  • fallbackFormatter (function | null): Optional formatter for untranslated keys
Returns: string - Translated value
playPokemonCry(cryUrl, button)
Plays a Pokémon’s cry audio and updates button state.Parameters:
  • cryUrl (string): URL to the audio file
  • button (HTMLElement): The cry button element
Returns: void
resetAllFilters()
Resets all filters and search to initial state without reloading data.Returns: void
clearAllFilters()
Clears all filters and applies changes to show all loaded Pokémon.Returns: void
showLoading(show, message = 'Cargando Pokémon...')
Shows or hides the loading indicator.Parameters:
  • show (boolean): Whether to show the indicator
  • message (string): Loading message text
Returns: void
showError(message)
clearError()
Displays or clears error messages.Parameters:
  • message (string): Error message to display
Returns: void

​
Usage Example

// Initialize the explorer
const explorer = new PokemonExplorer();

// Access from global scope
window.pokemonExplorer = explorer;

​
Events

The class automatically sets up event listeners for:
  • Search input (with debouncing)
  • All filter dropdowns
  • Focus/blur on search field
  • Click outside to close suggestions

​
Performance

  • Lazy loading: Pokémon details are only fetched when needed
  • Batch processing: Multiple API calls are grouped (50 per batch)
  • Caching: All fetched Pokémon are cached in memory (Map structures)
  • Debouncing: Search queries are debounced by 300ms
  • Pagination: Only renders 12 Pokémon per page

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us