Date
Juillet 2022
Techs
JavaScript , CSS , API
L'un de mes premiers projets en JavaScript. Il utilise l'API PokéAPI pour afficher des données sur les Pokémons comme le ferait un vrai pokédex.
Ce site web est le premier “vrai” projet personnel en JavaScript que j’ai réalisé. J’avais envie de faire un site web dynamique alors j’ai pensé à un espèce de Pokédex. Le site obtient les informations à partir d’une API nommée PokéAPI et ensuite on navigue à travers l’API pour parcourir les différents Pokémons disponibles dans la base de données (+de 900 Pokémons).
N’étant pas à l’aise avec le JavaScript en général et les APIs, j’ai utilisé un wrapper pour interagir avec l’API. En effet, un wrapper est développé par un tiers et permet d’utiliser l’API de manière plutot simple avec des commandes faciles à utiliser. Ainsi, pas besoin de se compliquer la tâche avec les détails complexes de l’API.
L’API est très complète et permet de récupérer toutes les infos dont j’avais besoin pour le Pokédex. Voici les principales infos à récupérer pour chaque Pokémon (on va prendre le très connu Pikachu en exemple) : le numéro (25), le nom (Pikachu), le genre de Pokémon (Pokémon Souris), l’image qui le représente, son ou ses types (Electrique) et une description qui est sélectionnée aléatoirement entre toutes celles disponibles.
async function renderPokemon(pokemon){
console.log(pokemon.id)
console.log(pokemon.name)
resetDisplay()
pokeHome.classList.add("hidden")
pokeContainer.classList.remove("hidden")
const rawPokemonType = pokemon.types[0].type.name
const pokemonType = rawPokemonType.charAt(0).toUpperCase() + rawPokemonType.slice(1)
sprite = pokemon.sprites.front_default
pokeID.innerHTML = "#" + pokemon.id
pokeSprite.src = sprite
pokeType.innerHTML = pokemonType
pokemon.types.forEach(type => {
console.log("type created")
const rawPokemonType = type.type.name
const pokemonType = rawPokemonType.charAt(0).toUpperCase() + rawPokemonType.slice(1)
const h1 = document.createElement("h1")
h1.innerText = pokemonType
h1.id = "poke-type"
h1.classList.add("pokemon-type")
h1.classList.add(type.type.name)
typeContainer.appendChild(h1)
})
}
Le code ci-dessus est la partie qui s’occupe du rendu des Pokémons sur le site web. Ainsi on récupère les données importantes pour les injecter dans le code HTML et les afficher de manière stylisée et ordonnée.
Pour le CSS du site, j’ai opté pour un design simple, sans trop de détails ou animations. Les éléments sont très simples et le site en lui même est très simple d’utilisation.
