Pokedex Project Using PokeAPI (Vanilla JS)
Tags: javascript, api, html, css
Published: 2024-02-09 09:40:30

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bea6m5lvp9n40vspsa5.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpecbpi4g4kchg4dqenn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exznm95p51oszbrbhzvz.png)

I also implemented some styling including :hover, which enlarges the names slightly on hover, giving it a more aesthetically pleasing look:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fuk7r3c574emfwng3z8.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzembhmqpv1nq31lt661.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/essxpkl7l5gmrtuomy66.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dhpt09p3iqfj2rsuyy4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0kcd7v1eujgp7ncix0a.png)

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