Flatiron Phase 4: JavaScript

I decided to return to the subject of beer after two projects on books. I love trying new craft beer and wanted to build something where a user could discover a random beer through the click of a button, like the beer, and also see a list of beers based on their category. Thus, I got to work building “Beerfinder.”

The first big issue I had was getting the liker to work. I thought I was doing great — I fetched the Rails API, added the “PATCH” method, created an event listener, created a function to handle the liking, etc. — but once I clicked on the second like button, nothing was happening. I remembered that .getElementById would only return the first matching object, and needed something else to look for all of the like buttons on the page. For this, I used .querySelectorAll. Originally, I had included this in the handleLike function, which made it incredibly bulky and didn’t make much sense when calling handleLike within the function itself. Ultimately, I moved it to the beer card itself, cleaning up my other functions.

document.querySelectorAll(".like-button").forEach(function(e){e.addEventListener("click", Beer.handleLike)})

The second main issue was the whole point of my project: the randomizer. I wasted what felt like hours trying to figure out how to randomize an object in JavaScript — and once I did that, trying to display the random beer — but it was always showing the last object of my array.

The code I was using from MDN to randomize:

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

I realized that I could get the console to log a correct random beer — but actually getting it to display stumped me. I realized that there was an easy, one line of code I could implement in my show method of my BeerController — .sample. Instead of having the bulky code in my JavaScript, I added this to the backend, then had the frontend fetch it. This was also perhaps the biggest learning experience of the whole project — I really had to think through the relationship between the API, what Rails was doing, what happened when I fetched something, and then how to get it to show. It was incredibly frustrating, but I feel like I’m coming away with a better idea of the backend/frontend relationships and how JavaScript works.

Future Wishlist:

1. Utilizing an online API for a better list of beers. This was my original intent for my project, but the APIs I wanted to use were either under construction or not available to the public. I’d like to revisit this project once I have access to one of these APIs.
2. Creating the ability for a user to log in/log out, like beers, keep track of liked beers, and maybe even have a “want to try” list from the randomizer.
3. Create randomizers within categories i.e. clicking on IPA would only give the user a random IPA. This would be especially useful with an online API. I think with my better understanding of how the backend and frontend connect, I could do this, I just did not get the chance!