javascript

Pokemon API - More info in a new html page

I’m working with Pokemon API and I’m displaying different cards with Pokemon info, which works fine. Every card has a MORE INFO button, if you click there, a new page will open with more info of that particular Pokemon. But I’m not sure how to achieve that. I could add that "more info" card in the index.html but I need that extra info in a new page.

index.html

<main>
    <div>
        <button id="btn-pokemon" type="button">Click to see Pokemon</button>
    </div>

    <div class="card" id="details" >
        <div class="more-details"></div>
    </div>
    
    <div class="container-pokemon" id="cardPokemon"></div>

</main>

Details.html

<div id=“details” >
    <h2>Pokemon Details</h2>
    <div class="more-details"></div>
</div>

App.js

const cardPokemon = document.querySelector("#cardPokemon");
const cardDetalle = document.querySelector('#detalle');
const details = document.querySelector('.more-details');
const btnPokemon = document.querySelector('#btn-pokemon');

const endPoint = "https://pokeapi.co/api/v2/pokemon/";

function showPokemon(poke) {

    let tipoDePokemon = poke.types.map((type) => `<p>${type.type.name}</p>`);
    tipoDePokemon = tipoDePokemon.join('');

    let abilitiesPokemon = poke.abilities.map((ability) => `<p>${ability.ability.name}</p>`);
    abilitiesPokemon = abilitiesPokemon.join('');

   const containerPokemon = document.createElement("div");

   containerPokemon.innerHTML = `
        <div class="card-pokemon">
            <span>${poke.id}</span>
            <div class="img">
                <img src="${poke.sprites.other["official-artwork"].front_default}" alt="${poke.name}">
            </div>
            <div class="info">
                <div>
                    <h2>${poke.name}</h2>
                    <div>
                        <p>Tipo de Pokemon:</>
                        ${tipoDePokemon}
                        <p>base_experience:</>
                        ${poke.base_experience}
                    </div>
                    <div>
                        <p class="stat">${poke.height}m</p>
                        <p class="stat">${poke.weight}kg</p>
                    </div>
            </div>
            <button class="btn-detalle" onclick="seeDetail(${poke.id})"> MORE INFO </button> 
     
        </div>
    `;
    cardPokemon.append(containerPokemon)
}

function detailsPokemon(poke) {

   details.innerHTML = `
        <div class="card-pokemon">
            <span>ID: ${poke.id}</span>
            <h2 class="pokemon-nombre">${poke.name}</h2>
        </div>
    `;

}

function seeDetail(id){

    console.log(id)
 
    fetch(endPoint + id)
    .then((response) => response.json())
    .then(data => detailsPokemon(data))

    window.open('details.html', '_blank');
    
}


btnPokemon.addEventListener('click', function() {

    for (let i = 1; i <= 100; i++) {
        fetch(endPoint + i)
        .then((response) => response.json())
        .then(data => showPokemon(data))
    }

})
Solution

  • You can send the id through a query parameter.

    In the script on index.html:

    function seeDetail(id){
    window.open('details.html?id=' + id, '_blank');
}

    Details.html:

    <div id="details">
    <h2>Pokemon Details</h2>
    <div class="more-details"></div>
</div>
<script>
const moreDetails = document.querySelector(".more-details");
function detailsPokemon(poke) {
    moreDetails.innerHTML = `
        <div class="card-pokemon">
            <span>ID: ${poke.id}</span>
            <h2 class="pokemon-nombre">${poke.name}</h2>
        </div>
    `;
}
const endPoint = "https://pokeapi.co/api/v2/pokemon/";
fetch(endPoint + new URLSearchParams(location.search).get('id'))
    .then((response) => response.json())
    .then(data => detailsPokemon(data))
</script>