Pokedex Project Using PokeAPI (Vanilla JS)

#javascript #api #html #css

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:

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:

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

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:

**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:

**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:

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