first commit
This commit is contained in:
commit
dc9fbfea37
5 changed files with 154 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
0
pokemonAPI/css/style.css
Normal file
0
pokemonAPI/css/style.css
Normal file
49
pokemonAPI/index.html
Normal file
49
pokemonAPI/index.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PokéDex - Découvrez l'univers Pokémon</title>
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Container principal -->
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>PokéDex</h1>
|
||||
<p class="subtitle">Explorez l'univers magique des Pokémon</p>
|
||||
</header>
|
||||
|
||||
<!-- Section de recherche -->
|
||||
<section class="search-section">
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="Rechercher un Pokémon..." id="searchInput">
|
||||
<button class="search-btn" id="searchBtn">Rechercher</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Zone de contenu -->
|
||||
<main>
|
||||
<!-- État de chargement -->
|
||||
<div class="loading" id="loader" style="display: none;">
|
||||
Chargement des Pokémon...
|
||||
</div>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div class="error" id="error" style="display: none;">
|
||||
Une erreur est survenue lors du chargement des données.
|
||||
</div>
|
||||
|
||||
<!-- Grille des Pokémon -->
|
||||
<div class="pokemon-grid" id="pokemonGrid">
|
||||
<!-- Les cartes Pokémon seront injectées ici par JavaScript -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="./js/api.js"></script>
|
||||
<script src="./js/loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
88
pokemonAPI/js/api.js
Normal file
88
pokemonAPI/js/api.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
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);
|
||||
}
|
||||
});
|
||||
16
pokemonAPI/js/loader.js
Normal file
16
pokemonAPI/js/loader.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*var toogle = true;
|
||||
function showLoader() {
|
||||
const loaderDiv = document.querySelector('#loader');
|
||||
if(toogle) {
|
||||
loaderDiv.textContent = "...Chargement"
|
||||
}
|
||||
else {
|
||||
loaderDiv.textContent = "Chargement...";
|
||||
}
|
||||
toogle = !toogle;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
showLoader();
|
||||
setInterval(showLoader, 1000);
|
||||
});*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue