Phase 1 JS Project — Flatiron School
Frankly put, the phase 1 project was full of ups and downs, but gradually I got more comfortable and really grasped the functionality and got some great experience with debugging errors and overall operation of the code in my project.
One of the biggest things I learned throughout the construction of this project was to reduce distractions when working on projects and try to block out chunks of time throughout each day for deep work and also for mental breaks and exercise.
As someone who enjoys beer (who doesn’t?), and lives in a very popular region for beer and breweries (Bend, Oregon), I wanted my project to be something that I am interested in, and something that would want to build upon in the future.
I chose to create a Brewery finder for all the Breweries in the state of Oregon based on the user searching for an individual city.
I used the OpenBreweryDB public API which was very helpful and I was actually able to speak with the author of the API and he was able to answer a few questions regarding the data and the functionality of the API as well! (Shout out to Chris!)
One of the sections of my Project that was the most interesting for me was the next & previous page buttons and their respective fetch requests. The API I used was limited to 50 breweries per page, and on the button ‘click’, their job was to fetch either the next, or the previous 50 breweries and append them to the DOM.
In the first few lines of JS code, I assign a few variables that get referenced in the code later on. First, I assign the pageNum variable to 1, which will mean the data will start on the first page of data. The variables here that reference the button elements are nextPage and previousPage. Once I grab their respective id’s , I add an event listener to them and pass them each a callback function inside the DOMContentLoaded code block .
The functions handleNextPage and handlePreviousPage are responsible for changing between pages. Each function uses the same fetch URL, but what each function does with the URL is different.
In handleNextPage, the fetch URL is passed the pageNum variable and increases it when clicked, and fetches the next 50 brewery objects, parses them to json, and appends them to the DOM.
The function handlePreviousPage kind of does the same things as handleNextPage except the pageNum decreases until it reaches page 1, and fetches the previous 50 brewery values, parses them to json, and appends them to the DOM.
Learning about the ins and outs of fetch was helpful to implement these functions and their behaviors in my project.
The code to my project is available HERE.
I am already looking forward to the additional projects in the course and implementing my future knowledge to improve this project and add it to my portfolio.
Bottoms Up!