Global

Methods

backToStart()

Resets the view to the start of the Pokédex after a search. Clears the current content and restores the default state, starting from Pokémon ID 1 to 21. Also updates UI elements accordingly.
Source:

capitalizeFirstLetter(stringToChange) → {string}

Capitalizes the first letter of a given string.
Parameters:
Name Type Description
stringToChange string The string to be transformed.
Source:
Returns:
The input string with the first letter in uppercase.
Type
string

checkIfShiny(container)

Updates the Pokémon GIF source based on the current shiny state. Sets the image to either the shiny or default animated sprite, depending on the value of `isShiny`.
Parameters:
Name Type Description
container HTMLImageElement The image element whose source should be updated.
Source:

closeOverlay()

Closes the Pokémon detail overlay and enables body scrolling again.
Source:

closeSuggestions()

Closes the dropdown list of search suggestions. This function clears the content of the suggestion container. It is used when the input field loses focus or when the user selects a suggestion.
Source:

disableScrollingBody()

Disables scrolling on the body element while the overlay is open.
Source:

disableSearchBtn()

Disables the search button.
Source:

emptyMatches()

Clears the array of search matches. Resets the `matches` array to an empty state before a new search.
Source:

emptySearchInput()

Clears the value of the search input field.
Source:

enableScrollingBody()

Enables scrolling on the body element after the overlay is closed.
Source:

enableSearchBtn()

Enables the search button.
Source:

getElementHelper(id) → {HTMLElement}

Returns an HTML element by its ID. Simplifies `document.getElementById` calls throughout the code.
Parameters:
Name Type Description
id string The ID of the HTML element to retrieve.
Source:
Returns:
The matching HTML element.
Type
HTMLElement

getNameOfAdjacentPokemon(modifier) → {string}

Returns the name of the adjacent Pokémon in the Pokédex. Calculates the next or previous Pokémon ID using a modifier, applies wrapping logic at the edges (1 ↔ 151), and returns the capitalized name from the search pool.
Parameters:
Name Type Description
modifier number Offset to apply to the current Pokémon ID (e.g. -1 or +1).
Source:
Returns:
The capitalized name of the adjacent Pokémon.
Type
string

(async) getPokemonData(id) → {Promise.<object>}

Fetches data for a specific Pokémon by ID from the PokéAPI.
Parameters:
Name Type Description
id number The ID of the Pokémon to fetch.
Source:
Returns:
A promise that resolves to the Pokémon data.
Type
Promise.<object>

getSecondTypeName() → {string}

Returns the name of the second Pokémon type, if available. If the Pokémon has only one type, returns "unknown" as a fallback.
Source:
Returns:
The name of the second type or "unknown" if not present.
Type
string

getWrappedId(id) → {number}

Wraps the Pokémon ID within the valid Pokédex range (1–151). Used to ensure that navigation beyond the first or last Pokémon correctly loops to the other end of the Pokédex.
Parameters:
Name Type Description
id number The raw Pokémon ID (can be out of bounds).
Source:
Returns:
The wrapped ID within the valid range.
Type
number

handleClickOnSearchBtn() → {void}

Handles the logic when the search button is clicked. If no matches are found, it renders MissingNo as a fallback. Otherwise, it renders the matching Pokémon and resets the search UI.
Source:
Returns:
Type
void

handleClickOnSuggestion(matchId)

Handles the logic when a search suggestion is clicked. Opens the overlay for the selected Pokémon and resets the search UI.
Parameters:
Name Type Description
matchId number The ID of the Pokémon selected from the search suggestions.
Source:

hideBackBtn()

Hides the back button.
Source:

hideLoadBtn()

Hides the load button.
Source:

hideLoadingScreen()

Hides the loading screen and enables body scrolling.
Source:

(async) init() → {Promise.<void>}

Initializes the application on page load. Shows the loading screen, renders the initial batch of Pokémon, and prepares the search pool for user input.
Source:
Returns:
Type
Promise.<void>

loadMorePokemon() → {void}

Starts the rendering process to load more Pokémon into the overview. Increases the current start and end range, while ensuring it stays within the bounds of the 1st generation (max ID 151). Also prevents loading if the start point exceeds the available Pokémon.
Source:
Returns:
Type
void

(async) loadSearchPool() → {Promise.<void>}

Loads the search pool containing the first 151 Pokémon and prepends MissingNo at index 0. This ensures that the Pokémon array index matches the Pokémon ID, simplifying ID-based access in the search functionality.
Source:
Returns:
Type
Promise.<void>

(async) openOverlay(id) → {Promise.<void>}

Opens the Pokémon detail overlay. Renders the detail card for the given Pokémon ID, makes the overlay visible, and disables body scrolling.
Parameters:
Name Type Description
id number The ID of the Pokémon to display in the overlay.
Source:
Returns:
Type
Promise.<void>

prevent(event)

Prevents the event from bubbling up to parent elements. Can be used in inline event handlers like `onclick` to stop parent elements from reacting to the same event.
Parameters:
Name Type Description
event Event The event object to stop from propagating.
Source:

pushMatchesIntoArray(inputRef)

Pushes all Pokémon from the search pool whose name includes the input string into the `matches` array. Performs a case-sensitive substring match and stores both the index and the Pokémon data for later use in the search result rendering.
Parameters:
Name Type Description
inputRef string The input string to match against Pokémon names.
Source:

renderAbout()

Renders the "About" tab of the dialog card. Inserts the general information and abilities of the current Pokémon into the detail info container.
Source:

renderAboutAbilities(abilities)

Renders the abilities of the current Pokémon in the "About" tab. Iterates through the abilities array and appends each ability to the abilities container.
Parameters:
Name Type Description
abilities Array The array of ability objects to render.
Source:

renderAboutAbilitiesTemplate(abilityName) → {string}

Returns the HTML template for a single ability in the "About" tab. Formats the ability name as a list item with a capitalized label.
Parameters:
Name Type Description
abilityName string The name of the ability to display.
Source:
Returns:
The HTML markup for a single ability list item.
Type
string

renderAboutTemplate(currentPokemon) → {string}

Returns the HTML template for the "About" tab in the Pokémon detail dialog. Displays basic information such as species, height, weight, and an empty container for the abilities list, which is rendered separately.
Parameters:
Name Type Description
currentPokemon object The Pokémon object containing species, height, and weight data.
Source:
Returns:
The HTML markup for the About tab.
Type
string

(async) renderDialogCard(id) → {Promise.<void>}

Renders the detailed dialog card for the selected Pokémon. Fetches the Pokémon data by ID, prepares the HTML structure, resets the shiny toggle, and renders type icons and stats.
Parameters:
Name Type Description
id number The ID of the selected Pokémon.
Source:
Returns:
Type
Promise.<void>

renderDialogCardTemplate(currentPokemon, backgroundColor) → {string}

Returns the HTML template for the Pokémon detail dialog overlay. The dialog includes: - Navigation buttons to switch between adjacent Pokémon - A shiny toggle GIF image - Type icons - A tabbed section for About, Stats, and Moves The background color for the detail section is based on the Pokémon's primary type.
Parameters:
Name Type Description
currentPokemon object The Pokémon object containing all necessary data.
backgroundColor string The color used as background for the lower detail section.
Source:
Returns:
The complete HTML markup for the dialog overlay.
Type
string

renderMissingNo()

Renders the MissingNo. fallback view when a Pokémon or its data could not be found. This function replaces the overview content with a MissingNo. template and adjusts the UI by hiding or showing relevant elements.
Source:

renderMissingNoTemplate() → {string}

Returns the HTML template for the MissingNo. fallback card. Displayed when a Pokémon cannot be found or loaded properly. Includes a glitch-style design and a link to the Wikipedia article for MissingNo.
Source:
Returns:
The HTML markup for the MissingNo. fallback card.
Type
string

renderMoves()

Renders the "Moves" tab of the dialog card. Clears the detail info container and iterates through all available moves of the current Pokémon, rendering each one individually.
Source:

renderMovesTemplate(i) → {string}

Returns the HTML template for a single move in the "Moves" tab. Capitalizes the move name and wraps it in a paragraph element for display.
Parameters:
Name Type Description
i number The index of the move in the current Pokémon's moves array.
Source:
Returns:
The HTML markup for a single move entry.
Type
string

(async) renderOverview(startPokemon, endPokemon)

Renders an overview of multiple Pokémon by ID range. This function fetches and renders individual Pokémon cards from start to end ID. It also includes a condition to hide the load button when the 151st Pokémon is rendered.
Parameters:
Name Type Description
startPokemon number The starting Pokémon ID.
endPokemon number The ending Pokémon ID.
Source:

(async) renderOverviewMatches() → {Promise.<void>}

Renders the overview for all Pokémon found by the search function. Uses the index from the `matches` array to determine the ID of each Pokémon, and displays their overview cards in the main container. Also updates UI elements like the load and back buttons.
Source:
Returns:
Type
Promise.<void>

(async) renderOverviewSingleCard(id, container) → {Promise.<void>}

Renders a single Pokémon overview card into the given container element.
Parameters:
Name Type Description
id number The ID of the Pokémon to render.
container HTMLElement The HTML element where the card will be appended.
Source:
Returns:
Type
Promise.<void>

(async) renderOverviewSingleMatch(iMatches, container) → {Promise.<void>}

Renders a single Pokémon card from the matches array into the given container. Retrieves the Pokémon by its index in the `matches` array, fetches its data, and appends the rendered card including its type icons.
Parameters:
Name Type Description
iMatches number The index in the `matches` array to render.
container HTMLElement The HTML element where the card will be appended.
Source:
Returns:
Type
Promise.<void>

renderOverviewTemplate(currentPokemon, backgroundColor) → {string}

Returns the HTML template string for a single Pokémon overview card. The card displays the Pokémon's name, ID, image, and includes a type container for dynamic content. The background color is determined by the primary type.
Parameters:
Name Type Description
currentPokemon object The Pokémon object to render.
backgroundColor string The background color based on the Pokémon's type.
Source:
Returns:
The HTML markup for the overview card.
Type
string

renderStats()

Renders the "Stats" tab of the dialog card. Clears the detail info container and inserts the stats template. Also sets the second type color used for the stat bars.
Source:

renderStatsTemplate() → {string}

Returns the HTML template for the "Stats" tab in the Pokémon detail dialog. Displays all six base stats (HP, Attack, Defense, Sp. Atk, Sp. Def, Speed) as styled range bars using dynamic inline CSS variables and values. The bar color is determined by the secondary type of the current Pokémon.
Source:
Returns:
The HTML markup for the stats tab with range visualizations.
Type
string

renderSuggestions()

Renders search suggestions into the dropdown container. Iterates over the `matches` array and appends each Pokémon as a clickable list item. Each suggestion triggers a handler on click to load the selected Pokémon.
Source:

renderTypes(containerId)

Renders one or two type icons of the current Pokémon into the given container. Works for both overview cards and detail views.
Parameters:
Name Type Description
containerId string The ID of the HTML container element to render the types into.
Source:

renderTypesTemplate(i) → {string}

Returns the HTML template for a single type icon of the current Pokémon. Used for rendering one of possibly multiple type icons inside a card or detail view.
Parameters:
Name Type Description
i number The index of the type in the current Pokémon's types array.
Source:
Returns:
The HTML markup for the type icon.
Type
string

searchInPool()

Searches the pool of 152 Pokémon (including MissingNo) for name matches based on the user input. Prevents searching if the input has fewer than 3 characters. Updates the UI by enabling/disabling the search button and rendering or closing suggestions.
Source:

setActiveDetailsTab(buttonId)

Sets the active state for the selected detail tab button. Removes the "active" class from all navigation buttons and applies it to the clicked button.
Parameters:
Name Type Description
buttonId string The ID of the button to activate.
Source:

showBackBtn()

Shows the back button.
Source:

showLoadButton()

Shows the load button.
Source:

showLoadingScreen()

Shows the loading screen and disables body scrolling.
Source:

switchPokemon(modifier)

Switches to the next or previous Pokémon in the Pokédex. Calculates the new ID based on the given modifier and uses wrapping logic to cycle from 151 to 1 and from 1 to 151 for seamless navigation.
Parameters:
Name Type Description
modifier number The offset to apply to the current Pokémon ID (e.g. -1 or +1).
Source:

toggleShinyGif()

Toggles between the default and shiny version of the Pokémon GIF. Updates the image source based on the current shiny state, adds a temporary glow animation, and flips the `isShiny` flag.
Source: