Pokédex

This is an online Pokédex I build using VS Code. Pokemon is my childhood, I used to play Pokemon cards with my brother. This project displays 250 Pokémon cards, I managed to create most elements using JavaScript. I got all Pokémon pictures and data from an API. Users can flip the card to see more information about each Pokémon. I aim to demonstrate my HMTL, CSS, and JavaScript skills through this personal project, and more importantly, to help users know more about each Pokemon and to bring up their childhood memory.

Features

Gotta Flip-Em All!
Pokemon cards are sort by Pokemon number and they are flipable! I added animation when the user clicks the Pokemon card, it will flip from the left side, and when the user clicks it again, it will flip back from the right, just like how we flip cards in real life.

Battle Music

If you played Pokemon on a Gameboy back in the day, you must have listened to this blood-boiling background music when you were in a battle! Listening to this music while flipping Pokemon Cards is going to bring you back to the good old day! This battle music auto-plays and loops in the background, and of course, you can pause it whenever.

Filter By Type

Users can filter Pokemon by type. There are 18 Pokemon types in all: Normal, Fire, Water, Grass, Flying, Fighting, Poison, Electric, Ground, Rock, Psychic, Ice, Bug, Ghost, Steel, Dragon, Dark and Fairy. Each Pokémon can have 1 or 2 types. For example, Bulbasaur is a dual-type Grass and Poison Pokémon, so it will appear in both types when either type is selected.

Create Your Own Pokemon!

There’s a New Pokemon button for users to create their own Pokemon. Users will receive pop-up questions to ask about the name, HP, height, weight, types, abilities, and moves of the Pokemon. Users can find the Pokemon they created at the bottom of the list

Try it out

Conclusion

I definitely had a lot of fun building this project because Pokémon is my childhood, and I like the interaction I offered on this site. I think the overall user experience is what makes this project successful because not only does this Pokedex is fully functional that the users can interact with, but it also has background music to bring the user’s childhood memory of them watching and playing Pokémon as a kid.

One thing I may go back and change is the amount of Pokémon cards that are populating, so far It’s populating 250 Pokémon cards, which is the first 2 generations. The reason I only did 250 is that I wanted to fasten the page loading time. I may use lazy load on this page so it’s not loading all images at once, so I can add more Pokémon cards for users that are younger and watched the later generations.