pokedexapitutorial

[pokedexapitutorial]

Here is my Pokédex project and me showcasing the functionality of it all (used text to speech to further explain my project)

[pokedexapitutorial]

Here is a video to help you with creating your own Pokédex

[pokedexapitutorial]

Here is the full code for my Pokédex project on my github. Alternatively, you can view all my code by clicking on the links at the top of my blog.

[pokedexapitutorial]

Tutorial: Building a Pokédex with HTML, CSS and Javascript

In this tutorial, we'll walk through how I created a Pokédex that pulls in Pokemon's names, types and stats using HTML , CSS and Javascript. The layout includes various interactive and decorative elements like circles, rectangles, and sections that resemble a Pokédex device. After this tutorial, you will learn how to create a functional Pokédex that will fetch Pokémon data from the Pokémon API and display it on page.

[pokedexapitutorial]

Overview of My Pokédex Project

The layout of our Pokédex is split into two main sections. On the left, we have the interface of the Pokédex itself, which includes circles and buttons resembling the classic device's look. On the right, we have a detailed section displaying information about the Pokémon, such as its name, types, and stats. A search functionality is incorporated, which allows the user to search for any Pokémon by name and display their information in real-time.

[pokedexapitutorial]

Setting up the HTML

We'll start by setting up the basic HTML structure. The layout is split into two main sections: the left side which displays the Pokédex interface and the right side for the Pokémon details and search functionality.

[pokedexapitutorial]

Styling the Pokédex CSS

This is the CSS to style the rectangles on the Pokedex

[pokedexapitutorial]

Styling the Pokédex CSS

This is the CSS to style the circles on the Pokedex

[pokedexapitutorial]

Making the Pokémon Search Functional with JavaScript

Now the fun stuff begins: making the Pokédex actually function by fetching data of the Pokémon from the API. For that, we are going to make use of the Pokémon API over at https://pokeapi.co/ to pull thousands of different Pokémon, along with their names, types, stats, and sprites.

Now let's go into breaking down a bit of JavaScript code I've written and explain this in much more depth:

Async Function

async function fetchData()

This function is declared as async, which means it returns a Promise and allows the use of await inside it for easier handling of asynchronous operations. This is useful when working with fetching data because it avoids the use of callback functions or.then() chaining, making your code cleaner and easier to read.

Try-Catch Block

try {. } catch (error) { console.error(error); }

The try block contains the code that may throw an error. If an error occurs during the execution of the code inside the try block the catch block will handle the error. Then, the error is logged to the console.

Get Pokémon Name from Input

const pokemonName = document.getElementById("name").value.toLowerCase();

It pulls out the input value by the user inside the input field with the ID of name. It then takes that value and uses it to make a request for a Pokémon by that name.toLowerCase() is called on this input to make the input case-insensitive.

API Request using Fetch

const response = await fetch(https://pokeapi.co/api/v2/pokemon/${pokemonName});

fetch() is an asynchronous function which makes an HTTP request. The URL here used refers to the API for the pokémons (pokeapi.co) and the pokemonName variable value is inserted into this URL string to retrieve data from a particular searched pokémon.

Response is Valid Check

if (!response.ok) { throw new Error("Could not find Pokemon"); }

response.ok This checks if the response status code is within the 200 range, indicating the request was successful. If the request fails-for example, the Pokémon doesn't exist-the throw new Error() statement creates an error with a custom message and throws it.

Parsing the JSON Data

const data = await response.json();

When the response is valid, it calls the.json() method to parse the JSON data returned from the API into a JavaScript object. The await keyword again does the work of pausing execution till it's done parsing.

Extract Pokémon Data

const pokemonSprite = data.sprites.versions["generation-v"]["black-white"].animated.front_default;

Here, the sprite image URL is extracted from the sprites object in the returned data. In particular, it looks at the animated sprite from the Generation V of Pokémon games - that is, Black & White versions. This sprite is animated, meaning it will show an animated image of the Pokémon.

Display The Pokémon Data

const imgElement = document.getElementById("pokemonsprite"); const nameElement = document.getElementById("pokemonName"); const typesElement = document.getElementById("pokemonTypes"); const statsElement = document.getElementById("pokemonStats"); const descriptionElement = document.querySelector('.description');

Above are lines that select various HTML elements where the Pokémon data is to be displayed. These select what document to use by either document.getElementById or document.querySelector:pokemonsprite: The DOM element where the sprite for a Pokémon should appear.pokemonName: The DOM element to put the name of the pokemon inside of.pokemonTypes: Where to display the type of pokemon.pokemonStats: To show the stats of that pokemon.descriptionElement.

Update Pokémon Sprite

imgElement.src = pokemonSprite; imgElement.style.display = "block";

The src attribute of the element is set to the URL of the Pokémon sprite, hence it would update the image that appears on the page. Set display style as "block" just in case, so that it can be visible when the image has finished loading.

Update Pokémon Name

nameElement.textContent = data.name.charAt(0).toUpperCase() + data.name.slice(1);

This line takes the Pokémon name (from data.name), capitalizes the first letter using charAt(0).toUpperCase(), and appends the rest of the name using slice(1). This ensures that the first letter of the Pokémon name is capitalized, for example, pikachu becomes Pikachu.

Display Pokémon Types

const types = data.types.map(typeInfo => typeInfo.type.name).join(", "); typesElement.textContent = Type(s): ${types};

The Pokémon data includes an array of types, where each type is represented by an object containing a name property.map() is used to extract just the type names, and .join(", ") is used to join them into a comma-separated string. The types are then displayed inside the pokemonTypes element.

Display Pokémon Stats

const stats = data.stats.map(statInfo => ${statInfo.stat.name}: ${statInfo.base_stat}).join(", "); statsElement.textContent = Stats: ${stats};

Similar to types, the stats are fetched from data.stats. Each stat is an object containing a stat and a base_stat.The.map() method creates a string for each stat in the format of stat name: stat value combines all of these into a single string. The stats are then displayed inside the pokemonStats element.

[pokedexapitutorial]

That's all folks!

In this tutorial, we created a simple Pokédex using HTML, CSS, and JavaScript. We used JavaScript to fetch data from the Pokémon API and styled the page to resemble the Pokédex from the anime. With this tutorial, go ahead and build your own Pokédex!