An Interesting Solution...

#javascript #beginners #webdev

Introduction

I'm a student of Flatiron school. I am currently working on my phase 1 project. I wanted to share something interesting that I learned while creating my application.

My App is called Pokedata and basically you can use it to search for any Pokemon card set or card and display info about in on the DOM. Below is a picture of my App.

Under The Hood

My App uses a click event listener so when a card set or card is clicked it will then fetch the necessary data and display it on the DOM. Here is my code:

As you can see I am grabbing text data and image data. Each card set and card have their own specific info and images.

The Problem

After setting up the click event listener, everything was working fine, until got deeper into the lists of cards and card sets. I found out that some of the card sets in pokemon had the info data but not any image data. Those sets maybe were not big enough releases to have their own images. I also found some of the cards were missing their card art image data. So whenever I ran across those cards or sets and clicked, I got an error on the image:

This Error was frustrating and because I am using an external API for this project I could not just go into the data and add images in. I needed a creative solution.

Thank You Chat GPT

I decided I was already to deep into this project to start over or select a new API. So I figured if could just find a way to display alt images when those specific ones had and error then the problem would be solved. I initially thought maybe I could do some sort of if/else statement. I played around with that for awhile and couldn't seem to get it to work. I eventually had to stop wasting time and find a solution. So... I asked Chat GPT. I always try to solve things myself before running to Chat GPT or only use it for extra learning but its a very great tool to help you when coding. That being said its not always 100% correct so check its work. I gave Chat GPT my code and fed it prompts to get at what i was trying to do. Low and behold it gave me an event listener that listened for "error" events. I had no idea you could even do that?? Here's the code:

This was the simplest solution ever and it was basically right in front of me. I wanted to display alt images when i got on image error. Perfect use an event listener that specifically listens for an error. Now my App ran perfect. Yes is still get the error on console but every set or card has images displayed.

Conclusion

I enjoyed coding and continue to find new ways to solve problems. That is what is so interesting with coding, there is most of the time multiple ways to solve an issue. You might fix a problem but there could be an easier or simple way. Always do your research and use the tools to your advantage to grow, learn and make your coding better.