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
Top comments (2)
Cloned the project and ran on my local machine. It was brilliant work considering it's fully made with vanilla js
Thank you! Appreciate the feedback 😁