Pokédex

Description:

A JavaScript application that simulates a Pokédex by loading data from an API (PokéAPI.co) and displays information for the original 150 Pokémon in a list.

Technologies:

HTML, CSS, JavaScript and Bootstarp.

Features:

• Displays a list of all Pokémon with their images and names.
• Allows users to click on a Pokémon to view additional details, such as type, image, weight and height.
• Implements dynamic searching to help users find Pokémon quickly.
• Includes responsive design, ensuring the app works smoothly on both desktop and mobile devices.

Purpose:

This project was built as part of an assignment for Career Foundry to showcase the creation of the architecture of a JavaScript app.

How it works:

The code initializes an Immediately Invoked Function Expression (IIFE) named pokemonRepository to manage a list of Pokémon. It stores objects containing names and URLs fetched from the Pokémon API (pokeapi.co), limited to the first 150 entries. The IIFE creates a private scope for pokemonRepository to prevent polluting the global namespace.

The add method adds a Pokémon object to the pokemonList array after validating that the input is an object containing name and detailsUrl properties.

The loadDetails function fetches detailed Pokémon information, such as their image, height, weight, and types.

The addListItem(pokemon) function dynamically creates a list item (<li>) for each Pokémon, including their image and name. It also adds a "Details" button for each Pokémon and appends the list item to the existing .pokemon-list element in the DOM.

The showDetails function displays a Pokémon's details in a modal window by calling showModal when the "Details" button is clicked. This includes the Pokémon's image, height, weight, and types.