Open in app

Sign in

Write

Sign in

creating a simple web app with the Pokémon API

my-stuff
6 min readMar 1, 2023

Easy tutorial for how to create a simple web app using the Pokémon api!

This project is one of my favorites, and one of the most fun ways to learn how to use Javascript, HTML, and APIs!

If you’re unfamiliar with the pokémon api, it’s a free RESTful API that provides you access to any information you could ever possibly need about pokémon. If you want to check it out and play around with some sample requests follow this link: https://pokeapi.co/

In this project, we’ll be creating a simple web application that fetches pokémon cards based on user input.

To get started you’ll want to create a new project, I’m using Visual Studio Code, but feel free to use any alternative.

  • Creating the Project Structure: Start by opening an empty folder you want to store this project in. I called mine PokemonAPIProject, but feel free to name it anything you want. Next, create 3 files inside it:
  • pokemon.html, pokemon.js, and styles.css

Well start with the pokemon.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pokemon Fetch!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
  <body>
    <form id="addPokemonForm">
      <input type="text" id="pokemonName" />
      <button type="submit">Add Pokemon</button>
    </form>
    <div id="root"></div>
    <script src="pokemon.js"></script>
  </body>
</html>

The important components of this file include:

<link rel="stylesheet" type="text/css" href="styles.css" />
  • This is where we reference our style sheet ‘style.css’ which we will be adding to next.
<form id="addPokemonForm">
  <input type="text" id="pokemonName" />
  <button type="submit">Add Pokemon</button>
</form>
  • This creates a simple form with an input field (where we will enter the pokemon name), and a submit button.
<div id="root"></div>
  • This is an important piece of our project because this is where we will be storing the Pokemon we get from the API. Take note of the id for this element which is ‘root.’

Next, as promised, let’s add to our style.css file:

This is where we get to add some creativity, so feel free to experiment with this and add new colors or layouts! We’ll start by adding this piece of code:

#root {
  display: flex;
  flex-direction: row;
}

With this code we are essentially saying to apply this style to every element in our html document with an id of ‘root’. For us, this is the <div> element we talked about in the previous step.

Quick refresher in CSS: ‘#’ is used for ids, ‘.’ is used for classes, and html elements are referred to by their name (example: h1).

By using the ‘display:flex’ instruction, we are designating this element to be a flex container. Thus, any elements added inside this container, ‘flex items’, will follow the rules for this container.

Lastly we have flex-direction: row

As you can see in this image, the flex-direction determines which direction and orientation the flex container will add items. As specified, our page will look like the example in the top left, and grow towards the right.

I’ll also be adding some additional CSS styling of the pokemon cards, which can be found with the completed code at the bottom of this page.

Finally, let’s implement the JS logic and get our pokemon!

If you’re interested in the steps, keep following along! Otherwise, you can scroll to the bottom to get the completed code.

Open the pokemon.js file:

well start by adding the following lines:

const API_URL = "https://pokeapi.co/api/v2/pokemon";
const root = document.getElementById("root");
const form = document.getElementById("addPokemonForm");

What we are doing here is defining 3 variables:

  • API_URL: for the url of the pokemon api
  • root: by using document.getElementById we can get the corresponding element in our html file. So here we have our <div id=“root”></div> element.
  • form: our form <form id=”addPokemonForm”> … </form> element.

Now that we have all the necessary pieces, our next step is to add an event listener to the form. This will make it so our logic is triggered when our ‘submit’ button is pressed.

form.addEventListener("submit", (event) => {
  // Prevents the form from submitting and refreshing the page
  event.preventDefault();
});

Now for the logic.

Well start by reading the user’s input for the pokemon. Well do that again by using document.getElementById via

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

Again, for reference, this is getting the value from the html element in our form: <input type=”text” id=”pokemonName” />

Now for calling the API well add the code:

 event.preventDefault();

  const pokemonName = document.getElementById("pokemonName").value;
  fetch(`${API_URL}/${pokemonName}`)
    .then((response) => response.json())
    .then((newPokemon) => {
      // create elements for the Pokemon Card
      const div = document.createElement("div");
      const image = document.createElement("img");
      const name = document.createElement("h1");
      // adding class from styles.css for card
      div.className = "card";
      // getting information from fetched pokemon object
      image.src = newPokemon.sprites.other.dream_world.front_default;
      name.textContent = newPokemon.name;
  
      div.appendChild(name);
      div.appendChild(image);
      // appending to root element
      root.appendChild(div);

      // another image option:
      //image.src = newPokemon.sprites.front_default;

      // other ideas:
      // div.appendChild(pokemonNameLabel);
      // div.appendChild(pokemonAttack);
      // div.appendChild(pokemonHealth);
    });

Lets walk through this…

  1. First, notice the use of the API_URL variable in the fetch function, and how we’re adding on the name of the pokemon. Say the user had entered ‘pikachu’ then the request url would be: ‘https://pokeapi.co/api/v2/pokemon/pikachu’
  2. Next, we are creating 3 new elements: <div>, <img>, and <h1>. The <h1> element is a title element in html, <img> is for images, and both of these element are then added as child elements to the newly created <div> element which acts as a container.
  3. Next, we are setting the class name for the div element (div.className = “card”;), this is the card class we created in our styles.css file
  4. Next, we add the image source and the pokemon name from the newPokemon object we fetched from the API
  5. Then, we append the <img> (image) and the <h1> (name) to the <div> element we just created.
  6. And Finally, we append that new <div> element to the <div id=‘root’> element of the html document using the variable we defined at the top of this file ‘root’.

I included some comments for other ideas you can add to the element using the API such as pokemon attack, and health, and other image option.

If you’re in Visual Studio Code and want to see how it turned out, in the top bar, select ‘Run’, then ‘Run Without Debugging,’ then select a web browser. Alternatively, open the html file directly via a web browser.

The Final Product:

(If you’re interested in my final product after adding a lot more styling and features check it out here)

And for all the final code:

pokemon.js

const API_URL = "https://pokeapi.co/api/v2/pokemon";
const root = document.getElementById("root");
const form = document.getElementById("addPokemonForm");
form.addEventListener("submit", (event) => {
  // Prevents the form from submitting and refreshing the page
  event.preventDefault();
  const pokemonName = document.getElementById("pokemonName").value;
  fetch(`${API_URL}/${pokemonName}`)
    .then((response) => response.json())
    .then((newPokemon) => {
      // create elements for the Pokemon Card
      const div = document.createElement("div");
      const image = document.createElement("img");
      const name = document.createElement("h1");
      div.className = "card";
      image.src = newPokemon.sprites.other.dream_world.front_default;
      name.textContent = newPokemon.name;
      div.appendChild(name);
      div.appendChild(image);
      root.appendChild(div);

      // another image option:
      //image.src = newPokemon.sprites.front_default;
      // other ideas:
      // div.appendChild(pokemonNameLabel);
      // div.appendChild(pokemonAttack);
      // div.appendChild(pokemonHealth);
  });
});

styles.css

#root {
  display: flex;
  flex-direction: row;
}

img {
  display: flex;
  align-self: center;
  height: 100px;
  width: 170px;
  margin: 3px;
  opacity: 1;
  object-fit: contain;
  border-style: solid;
  border-color: black;
  background-color: white;
}

.card {
  display: flex;
  flex-direction: column;
  align-content: center;
  border-radius: 5%;
  border-width: 5px;
  border-style: solid;
  border-color: black;
  margin: 10px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .4);
  width: 180px;
  height: 300px;
}

h1 {
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  align-self: center;
}

pokemon.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pokemon Fetch!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <form id="addPokemonForm">
      <input type="text" id="pokemonName" />
      <button type="submit">Add Pokemon</button>
    </form>
    <div id="root"></div>
    <script src="pokemon.js"></script>
  </body>
</html>
Girls Who Code
Women In Tech
API
Web App Development
Developer

--

--

my-stuff

Written by my-stuff

273 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams