Broadcast Blitz: Week 3

This week, it was finally time to dig into the nitty-gritty of the backend, making fetch requests to the existing API so that I could use that data in the project! The first thing I did was make my search bar its own component — this likely would have been fine in the Home component it lived in previously, but for the sake of clean and organized code, it seemed like the right choice. Then, within that component, I wrote an async arrow function called Search that will be used to search the API onSubmit of the search form. This function takes in the request URL and fetches data from it. I struggled with this at first — it is a fairly straightforward process but implementing my API key was a bit different than I am used to with other APIs, so it took some trial and error to get it to work.

I also made further tweaks to the styling. I implemented a search button beneath the search input box, which is what triggers the fetch request. Through some trial and error, I eventually was able to get it to be a nice round and appropriately sized button instead of the boring gray square default. I also added hover effects, so that the colors invert when a user hovers over the button. Finally, I made slight style changes to the “pick a random team” text to make the branding more cohesive.