DEV Community

Thomas Cansino
Thomas Cansino

Posted on

[DAY 48-53] I Built A Pokemon Search App

Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 48-53, I built a pokemon search app to complete the data structures & algorithms certification project in freecodecamp.

I also built an authors page and a forum leaderboard to learn about fetch API, promises, and asynchronous programming.

Image description
Image description
Image description

In the pokemon search app, the program works by just simply inputting the name of the pokemon or its ID and then it'll output its stats, image, and types.

While building this project, I struggled in making one of the functions work and took me a while to figure it out that I almost did not complete the project.

Image description

The reason is because whenever I click the left and right buttons to scroll through images, the images of the pokemon duplicate. This is because my fetch API function is within the search button event listener and within my fetch API function is another event listener for the left and right buttons. This means that my code has multiple event listeners.

When dealing with multiple event listeners, I just learned that I need to remove the event listener from the left and right buttons before adding them again. This is to prevent duplicates of images which cause a visual glitch in my app.

Image description

Moving on, in building the authors page and the forum leaderboard, I have to be honest that I only learned the syntax of fetch API and the concept of async programming. At the end of the day, it was the pokemon search app that taught me how to apply that knowledge to code. Unguided problem solving is still king when it comes to active learning.

However, we all still need guided learning from time to time.

Personally, I use freecodecamp's courses as a way to easily learn the basics and syntax because their courses are engaging and interactive which encourages active learning. From then on, I move on to unguided problem solving.

Unlike other beginners, I don't watch tutorials unless I will code with them and change something after.

When learning a new thing, I try my best to stay away from passive learning. I always rush to actual problem solving and ask questions along the way.

It worked for me in the past when I was studying for my licensure exam in civil engineering and it’s working for me now that I am 2 months into my coding journey.

Anyways, that’s all for now, more updates in my next blog! See you there!

Top comments (0)