DEV Community

Cover image for Pokedex Project Using PokeAPI (Vanilla JS)
saradomincroft
saradomincroft

Posted on • Updated on

Pokedex Project Using PokeAPI (Vanilla JS)

My phase-1 project for my Software Engineering Transform course with Academy XI.

For this project I decided to make a Pokedex which fetches data from the PokeAPI: https://pokeapi.co/

I initially wanted to do a project on music events, which would have used Eventbrite and Ticketmaster APIs, however I was having a bit of difficulty with the private keys, so I think I will come back to this at a later stage.

My Pokedex project is quite simple (well for me it was a grind 😂)
I first used this video from 'Kenny Yip Coding' to help me get the initial structure down, and then I implemented some extra features which I have learned in my course: https://www.youtube.com/watch?v=dVtnFH4m_fE

I started with some basic HTML to get the structure of my project going:
Image description

On load, the Pokedex displays the OG 151 Pokemon, with a scroll bar, Bulbasaur is the initial Pokemon displayed and when you click on each Pokemon it updates the image and description. The PokeAPI allows you to choose from a number of images and descriptions:
Image description

Image description

I also implemented some styling including :hover, which enlarges the names slightly on hover, giving it a more aesthetically pleasing look:
Image description

The functions I have added to this are a search by name/ number, filter by type, and add/ remove from favourites.

**Search: **This function allows the user to search for the Pokemon with either the name or number, if not found, an error alert will appear and the input field will clear:
Image description

**Filter by Type: **There is a dropdown box which allows the user to filter by type (Honestly I'm not super sure how this part is working, it took me a while to get it to work, and I didn't think I had finished what I was doing but then it seemed to work and now I'm too scared to change it:
Image description

**Favourite: **This allows the user to toggle a "heart" which is appended next to the name of the Pokemon, toggling this will fill the heart container and add/ remove it to the favourite Pokemon container. It took me a while to get this working properly:
Image description
Image description

I would have liked to be able to combine the search and filter functions so that when a type was filtered, and the user starts to search for the Pokemon by name/ number, it only allows you to search the Pokemon which have already been filtered, I had trouble doing this so I have left it for now and will come back to it after my project review with my tutor.

Here is a link to my project: https://github.com/saradomincroft/pokedex

Top comments (2)

Collapse
 
rojansr profile image
Rojan Rai

Cloned the project and ran on my local machine. It was brilliant work considering it's fully made with vanilla js

Collapse
 
saradomincroft profile image
saradomincroft

Thank you! Appreciate the feedback 😁