Vue Pokedex - Working with Fetch() and Vue

Introduction

A month or so ago, I decided that I wanted to try and get comfortable with JavaScript because I was interested in working with one of the JavaScript frameworks, be it React, Angular or Vue. To achieve this and out of curiosity, I enrolled in Wes Bos’s #Javascript30 course. This course helped clear many knowledge gaps I had about how does JavaScript interacts with HTML.

Thirty days later and with the course completed, I wanted to mess around with one of the big three JavaScript frameworks, to my surprise, the only one that I had not try was Vue. With that in mind, I thought about creating a little Pokedex using PokeApi and Vue. The first order of business was to fetch the API (Application Programming Interface) and then try to display it on the page.

Here is the link to the repo if you are interested in checking it out yourself.

Fetching the API

One of the things that I had not done much was working with an API because my web experience was mostly HTML and CSS with little JavaScript. I searched around the internet and found that I could make a request to an API using fetch(), here is a link to MDN about it. After reading for a bit, I went into the PokeApi website to fiddle around with some of the examples they give.

Now that I had an idea of how the API behaves, I decided to learn the basics of Vue. I read the introduction in the docs and went into Vue Mastery’s Intro to Vue course. I had fun with it and helped get going with Vue on a basic level.

For Vue, I decided to use the CDN version of it, since I did not want to complicate things with dependencies and all that stuff. Following that, I created the js file and started figuring out how I was going to work with fetch(), if you want to know more about how to use fetch(), check the following link.

I worked on it for a while, and after some failed attempts, I got something going.

GREAT!!

With that win, I decided to display the corresponding Pokémon sprite, I edited the JS file a bit and…

The hype was real, and my motivation was OVER 9000!

Now it was the perfect time to add some styles to the page.

Styling the page

Plain HTML looked boring, so I started adding the CSS to make it look a bit more friendly. For this project I took the chance and worked with CSS Grid for the first time, and I must say, setting the grid was easy.

I tweaked the CSS here and got this.

Looking Good.

Final touches

To call this one done, I wanted to include a link to the pokemon.com Pokedex, this proved to be simple because it was just adding a link with a button, as you can see in the following image.

To achieve this dynamically, I did an attribute binding to the href and passed in pokemon.name, now each Pokémon entry will have a link to the pokemon.com Pokedex. Here is a snippet of the HTML.

<div class="grid">
  <div class="pokemon" v-for="pokemon in pokedex" :key="pokemon.id">
    <div :id="pokemon.id">
      <h3>{{pokemon.id}}</h3>
      <img
        class="sprite"
        :src="pokemon.image"
        :alt="pokemon.name + ' sprite image'"
        srcset=""
      />
      <a
        :href="`https://www.pokemon.com/us/pokedex/${pokemon.name}`"
        target="_blank"
        rel="noreferrer noopener"
      >
        <h2>
          <button>{{pokemon.name}}</button>
        </h2>
      </a>
    </div>
  </div>
</div>

Closing thoughts

I must say, I enjoyed my time playing with Vue, I know this project didn’t even scratch the surface of what Vue was capable of, but it helped me round up some of the topics I learned while I was taking Vue Mastery’s intro course. This project was also a huge win for me, since one of my goals this year was to understand how to work with an API, and now, thanks to this project, I managed to achieve that, kudos to me.

Things I learned during this project

• How to work with fetch() and handle the responses.
• Learned how to use Vue on a basic level, data bindings and Vue directives.
• Work with CSS Grids and refresh my CSS knowledge.

Possible updates

• Make a two-way data binding with an input for the number of Pokémons that I want to get, making the fetch URL dynamic.
• Create a details page about the Pokémon.
• Implement a CSS framework like Tailwind CSS or Bulma.

Hope to see you again on my next post.