NBA Logo Finder - Don't Forget Favorite Teams Logo!

NBA Logo Finder

With the NBA Logo Finder, you can easily search for any NBA team and instantly see its logo displayed on your screen. No more frantically searching through Google Images or scrolling through endless webpages. The NBA Logo Finder brings you the logos you crave with just a few clicks.

Issues I Encountered

The NBA Logo Finder utilizes many different functionalities of Javascript, HTML, & CSS. At first I had struggles for a while to even get a response from the API, and even with help from an instructor and many videos, I just couldn't crack it. So I switched directions and tried a whole new API, this time I was receiving a valid response but it wouldn't show on the site, only in my console. I thought all was hopeless until I added one pretty simple aspect to a section of my fetch request:

const firstResponse = result.response[0];
displayTeamStats(firstResponse);
else {
teamStats.textContent = 'Team not found.' 
};

This simple section under my fetch request finally let me have my response shown in the web screen, the only problem now was that I could only search for a single team, and any team I put in only ever showed a generic first team in the list. So next I made a change to the const URL API so dynamically update it with whatever 'teamName' was searched. And that looked liked this:

const url = `https://api-basketball.p.rapidapi.com/teams?league=12&season=2019-2020&search=${teamName}`;

The Promise

After All The Research I Had To Do To Fix My Fetch Request, I Learned More About A Topic I Wasn't Super Familiar With, The Promise.

A promise in JavaScript is a powerful mechanism for handling asynchronous operations. It represents a value that may not be available immediately but will be resolved or rejected in the future. When you create a promise, it starts in a pending state. As the asynchronous operation progresses, the promise can either be fulfilled with a value (resolved) or encounter an error (rejected).

Promises work by allowing you to attach callbacks to handle the outcome of the asynchronous task. You can add a .then() method to execute a function when the promise is resolved successfully. If the promise is rejected, you can use the .catch() method to handle errors. Additionally, you can use .finally() to run code regardless of whether the promise is resolved or rejected, useful for cleanup tasks.

In my code when I send my fetch request to the public API, I get a promise to either receive an error to receive the information I requested, or I receive the NBA teams logo I requested. The Promise is certainly a hard topic to grasp as you don't actually see it, and it is more of a concept than anything, a good analogy I heard was;

imagine you are at a diner and you ask the waitress for a cup of coffee. Them saying "I will be right back with that" is a promise, and they will either return with that cup of coffee (resolved), or they will come back and let you know they are out of coffee or sugar, etc (rejected).

Hopefully this analogy helps you like it helped me!