toine/SandboxJS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
mrtoine 2025-09-12 11:10:19 +02:00
commit dc9fbfea37
5 changed files with 154 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.DS_Store

0
pokemonAPI/css/style.css Normal file
View file

49
pokemonAPI/index.html Normal file
View 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
View 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
View 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);
});*/