88 lines
No EOL
3 KiB
JavaScript
88 lines
No EOL
3 KiB
JavaScript
const pokeUrlApi = 'https://pokeapi.co/api/v2/';
|
|
const getAllPokemonsApi = async () => {
|
|
return fetch(`${pokeUrlApi}pokemon?offset=0&limit=10`)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
return data.results.map((pokemon) => {
|
|
return {
|
|
id: pokemon.url.split('/')[6],
|
|
name: pokemon.name,
|
|
img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.url.split('/')[6]}.png`,
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
function createListHtml(elements){
|
|
const list = document.createElement('ul');
|
|
|
|
elements.forEach((element) => {
|
|
const listItem = document.createElement('li');
|
|
listItem.classList.add('pokemon-item');
|
|
listItem.textContent = element.name;
|
|
|
|
listItem.addEventListener('click', async () => {
|
|
const existingDetails = listItem.querySelector('div');
|
|
if (existingDetails) {
|
|
existingDetails.remove();
|
|
return;
|
|
}
|
|
|
|
const pokeData = await loadPokemonDatas(element.name);
|
|
const details = document.createElement('div');
|
|
details.innerHTML = `
|
|
<h3>${pokeData.name} (#${pokeData.id})</h3>
|
|
<img src="${pokeData.img}" alt="${pokeData.name}">
|
|
<p>Height: ${pokeData.height / 10} m</p>
|
|
<p>Weight: ${pokeData.weight / 10} kg</p>
|
|
<p>Types: ${pokeData.types}</p>
|
|
`;
|
|
listItem.appendChild(details);
|
|
details.style.display = 'block';
|
|
});
|
|
|
|
list.appendChild(listItem);
|
|
});
|
|
|
|
document.querySelector('body').appendChild(list);
|
|
}
|
|
|
|
function loadPokemonDatas(name) {
|
|
if (!name) {
|
|
console.error('No Pokémon name provided');
|
|
return Promise.reject('No Pokémon name provided');
|
|
}
|
|
return fetch(`${pokeUrlApi}pokemon/${name}`)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log(data);
|
|
return {
|
|
id: data.id,
|
|
name: data.name,
|
|
img: data.sprites.front_default,
|
|
height: data.height,
|
|
weight: data.weight,
|
|
types: data.types.map(typeInfo => typeInfo.type.name).join(', '),
|
|
displayed: false
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
var divLoading = document.querySelector('#loader');
|
|
|
|
try{
|
|
const pokeapi = await getAllPokemonsApi();
|
|
|
|
if(pokeapi) {
|
|
createListHtml(pokeapi);
|
|
divLoading.style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching Pokémon data:', error);
|
|
divLoading.style.display = 'none';
|
|
const errorElement = document.createElement('p');
|
|
errorElement.textContent = 'Failed to load Pokémon data.';
|
|
document.querySelector('#pokemons').appendChild(errorElement);
|
|
}
|
|
}); |