The Pokémon Display Web App is a simple, front-end web application that fetches and displays information about Pokémon using the PokéAPI. This project aims to provide a user-friendly interface where users can view details of various Pokémon, including their names and images.

To create a web application that interacts with an external API (PokéAPI) to fetch data. To display Pokémon information in a visually appealing and responsive layout. To enhance understanding and skills in HTML, CSS, and JavaScript. To practice fetching and handling data from a RESTful API. Technologies Used HTML5: For the structure and layout of the web page. CSS3: For styling and responsive design. JavaScript: For fetching data from the PokéAPI and dynamically updating the web page. PokéAPI: A RESTful API providing Pokémon data.

Fetch Pokémon Data: The application fetches data for the first 10 Pokémon using the PokéAPI. Dynamic Content Display: Pokémon names and images are dynamically inserted into the web page. Responsive Design: The application features a responsive design to ensure it looks good on various devices. Simple and Clean UI: The user interface is straightforward, making it easy for users to navigate and view Pokémon information.

HTML Structure: The HTML file sets up the basic structure of the web page, including a container for displaying Pokémon. CSS Styling: The embedded CSS styles the Pokémon cards and ensures a clean and consistent look. JavaScript Functionality: When the page loads, JavaScript fetches data for the first 10 Pokémon from the PokéAPI. Each Pokémon's name and image are extracted and displayed in a styled card format on the web page.

Here's a snippet of the core JavaScript functionality used in the project:

javascript Copy code document.addEventListener('DOMContentLoaded', () => { const pokemonContainer = document.getElementById('pokemon-container');

const fetchPokemon = async (id) => {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
    const pokemon = await response.json();
    return pokemon;
};

const displayPokemon = (pokemon) => {
    const pokemonElement = document.createElement('div');
    pokemonElement.classList.add('pokemon');
    pokemonElement.innerHTML = `
        <h3>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h3>
        <img src="${pokemon.sprites.front_default}" alt="${pokemon.name}">
    `;
    pokemonContainer.appendChild(pokemonElement);
};

const loadPokemons = async () => {
    for (let i = 1; i <= 10; i++) { // Display first 10 Pokémon
        const pokemon = await fetchPokemon(i);
        displayPokemon(pokemon);
    }