Find Breweries App
Basic App Functionality: The goal of this app is to give a search bar to enter a keyword and using that keyword to search a brewery API. The data is then listed as brewery names as clickable links. Clicking on the links brings up extra data about the individual brewery. Listing Name, Address, City, State, and then includes an external link to the brewery’s website. To add further functionality and show further skills in developing there is a comment form on this second section that enters a list onto the page with capability to add multiple comments at the bottom of the page.
HTML: The HTML is skeletal. The goal wasn’t to show off HTML functionality thus the majority of HTML editing is done through JavaScript. The HTML including is the text that is needed on the page before any changes is added. And the form that creates the initial search bar. The rest of the HTML is just containers to place the JavaScript created HTML changes.
CSS: The CSS is incredibly basic. Almost purely used for element spacing and centering. The only interesting addition through CSS would be changing the bullet points of the beer list from the basic round points to beer emojis just to show a small amount of creativity.
JavaScript: The first EventListener is a DOMContentLoaded call. The purpose of this is to make the DOM available earlier in the loading process. This helps prevent errors from certain HTML elements not loading fast enough.
The second EventListener is for the submit function of the search form. Using a .preventDefault() call to stop the page from reloading every time the submit form is clicked. Then calling a future program getBreweries() which will populate the page with a list of breweries. And finally a .reset() call to clear out the search form after each search.
The getBreweries function starts by grabbing three DOM elements. It needs to get the value of the search form (the user submitted data) then it grabs the list that will be populated by the search results and then a third section that is where additional data about the breweries will appear with a click. The first step is to clear out the two lists so that searching isn’t continuously adding more and more information to the page.
The big step of the getBreweries function is a fetch call. Using the Open Brewery DB the fetch call has to include the user submitted search and then the results has to be converted to a JSON file so that it can be properly read. That data is then added to the HTML so the user can see it. The final step of getBreweries is a call to another function clicksToLinks().
clicksToLinks() adds the ability to click on the links created inside the getBreweries function. This is a third EventListener for what happens when the links are clicked upon. The click results in the next function breweryInfo to be called.
The final function is breweryInfo. This app is for adding additional information once a link brewery name is clicked upon. It wants to populate a new list while removing the former list. It starts with grabbing those two DOM elements then has a fetch call back to the Open Brewery DB this time grabbing a specific brewery only based on the ID created inside the getBreweries function. It also creates a comment form to allow additional functionality. This gets to a fourth EventListener for comment submission.
The functionality of the comment form is similar to the initial search form. Have to preventDefault and .reset after the submission. Adding a list element and using appendChild to add it to the HTML divider that was initially created.
