What a Journey it has Been!
At the beginning of July 2022, I decided to embark on a new journey into the world of software development. With some advice from my Friends and Family(as well as some rigorous scouring through google reviews), I decided the flex program at #Flatiron school was the the best choice for me! I have to say, it's been one of the best learning experiences of my Life.
Diving straight into software development with very little background was no easy task. That being said, Flatiron's approach to teaching the fundamentals while encouraging students to rely on themselves has been completely eye opening.
FIZZY is a simple search and store application for cocktail recipes. It allows users to browse for their favorite cocktails by name, store them in a sperate favorites list, and view the recipe in an enlarged main view. It is a Single Page Application that utilizes a local JSON server to fetch data and display it in a manner more appealing to the user. Initially, the data comes from a third party API (credited in the readme) but it was broken up making it a bit difficult to get a comprehensive list.
As seen above, I decided to compile all of the data from the free API into one local JSON server for easier access. The program files consist of:
- A JSON server containing the entire drink database
- A base HTML file containing elements to map the initial page
- A CSS file that handles the styling of everything on/appended to the DOM
renderRecipesList() to iterate through the data and append each element to our cocktail list element. I've also stored some of the HTML elements created as JS variables to use as foundations for the DOM elements that the program creates.
At it's core
renderRecipeList() is a function that takes one argument (an object with multiple
key:value pairs), and appends the values needed to our recipe list. It utilizes the
createElement() function to first build the DOM elements, adds a few
eventListeners() to the appropriate elements so users can interact, and then finally appends them to the DOM. It also uses a callback to a
clearList() function to refresh the page whenever it is called.
Next we have our function for building a our recipe view Dom element. The header elements in both of Fizzy's viewing lists have "click"
eventListeners() that allow the user to view the perspective recipe in the main section.
renderInMainView(), much like
renderRecipeList(), first clears the child elements from it's main parent
<div>, creates DOM elements from specifically targeted values within the object it has been passed, and finally appends them back to the main view
This function works almost identically to our
renderRecipeList(). It takes an Object as an argument, pulls the drink name from it's values, converts it into a clickable DOM element and then appends the final result to the favorites list. It does not however refresh the list when it is called.
And now the fun begins...
createElement() is a fairly dynamic function that is utilized throughout the majority of our program. It takes up to four optional arguments - a tag for the element, a class, an argument to provide inner text, and finally an option to pass an image. First it attaches the passed class to the tag provided. Then it checks to see if the text value is truthy. If it is, it attaches an innerText value. It then checks to see if an image source has been passed. If so, it attaches that as well, finally returning the newly created element.
Ah yes... the search engine. I have to say this one was a bit tricky at first. It took me some time to grasp. When called, this function first re-fetches all of the JSON data and then stores it into a usable JS variable. Then, it declares a variable called
matches. Matches is another JS function that takes the value of our search box entry, filters through every object in our array, and returns a new array containing drink names with the text values passed, regardless of their case.
Finally our search engine clears the list using a callback, checks to see if the search box is empty (in which case it refreshes the list), iterates through our new array and displays the returned drink names.
Lastly We have our Remaining Callbacks:
searchMeasurements(): These two functions are built to iterate through the specific keys in a object based on their position, and return truthy values. They convert object's nested values into any array to make this possible.
displayPopup(): This function is used a callback for an event listener. When the event is triggered, a small image is displayed of the respective drink.
removeElement(): Removes the child element from any parent node that is passed as an argument.
removeElements(): Removes all child elements from their parent
Thank you very much for taking the time to read about project. Building this simple simple search has been a fantastic experience. As always, any feedback is welcome. FIZZY has a long way to go!