2
submitted 1 year ago* (last edited 1 year ago) by reric88@beehaw.org to c/programming@beehaw.org

I am currently trying to build a search component so users can search for Pokemon (since it is currently paginated with 20 per page.) I'm having some difficulty figuring it out, but I'm making progress.

All the information is auto-populated. It's probably an easy thing for seasoned developers, but I'm proud to have linked the card colors, types and backgrounds to their relevant Pokemon.

Edit: search function is working now! But I I need to add "toLowerCase()"... And add prefix to the type images of some types. Otherwise, it's working decently! The search field works in real-time, so the page is a little sluggish to load. You can search by Name, ID, Type or Ability, just start typing and your results will appear.

I opted for a single search field for simplicity and to condense the page. I can add filters, but I like it this way for now.

~~Next I am adding a click-to-zoom on the cards, and when they fill the screen, additional info will populate the card, and even more info on the back.~~

Edit 2: Instead of making click to zoom, I added a drop-down menu to change sprites between all generations. Maybe now I'll add click to zoom!

Edit 3: I added the zoom feature and made some tweaks! Added official artwork, better pagination, generation links to display all the Pokemon from a generation, and sound effects! (My fav)

top 2 comments
sorted by: hot top controversial new old
[-] venia_sil@vlemmy.net 2 points 1 year ago

Pretty good work. And I know this part doesn't have much to do with programming but I just love that the items are presented kinda like they were Pokémon cards.

[-] reric88@beehaw.org 2 points 1 year ago

Thanks! I put it here because there wasn't a coding space to put it. But I've updated the link, the other one was a little old. Now the Pokemon make sounds! (Their recent cries, not the older ones.)

this post was submitted on 13 Jun 2023
2 points (100.0% liked)

Programming

13361 readers
1 users here now

All things programming and coding related. Subcommunity of Technology.


This community's icon was made by Aaron Schneider, under the CC-BY-NC-SA 4.0 license.

founded 2 years ago
MODERATORS