Flatiron School: Phase-1

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.

Phase-1 heavily covers the fundamentals of JavaScript, learning to master the concept of functions, iterating through data, and manipulating data to give a program life. After that, the next step was to learn what they call "The Three Pillars of Front-End Web Development". Manipulating the(DOM), Recognizing JS events, and Communicating with the server. In this Post, I'd like present my final project for Phase-1 and demonstrate some of the core techniques I've learned to make it all happen.

Introducing....

FIZZY! - The Bartending App

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 main JavaScript file which handles the functionality and listens for user input
• A CSS file that handles the styling of everything on/appended to the DOM

Fetching The Data

The first step was to a write a proper asynchronous function that fetches the data from our server and converts it into usable JavaScript format. In the above function the fetch request takes the return, converts it to a JavaScript array, and then utilizes a call back function called 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.

Building The Recipe List

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.

Building the Main View

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 <div>,

Adding to Favorites

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.

Controlling the Elements

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.

Searching for Drinks!

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.

More Callbacks

Lastly We have our Remaining Callbacks:

• searchIngerdients()/ 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

Conclusion

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!