My First Front-End Javascript Application
Module 3 of Flatiron School was filled with ups and downs. Hailed as the most challenging on the modules, its new focus on Javascript proves difficult for many students to grasp after becoming such masters of Ruby in the previous modules.
However, I passed the coding challenge on my first attempt and was given the stamp of approval to begin working on my project for Module 3. My partner and I decided to make a Cocktail App, “The DiveBar”, where one can create or delete their own cocktail. A user can also leave a comment on the cocktail or up or downvote their favorite cocktails.
Next, we decided it would be easiest to have all our cocktails rendered on the same page. Then, when a user scrolls, they can see all the available cocktails and their ingredients.
A user can vote on the cocktail and it will update the database via Javascript fetch request, so when a they refresh the page the votes will persist on the webpage. Anyone can delete a drink from the page via the “Delete” button, and it will also update the page as well as the database. It will be as if the drink never existed!
The most challenging part of creating this website was rendering the comments.
At first, we faced the issue that if a comment was created on any drink, it would always post to the comments section of the first drink. This required making two separate functions—one to handle new comments, and one to handle those already created in the database. Here is how we rendered all comments already in the database:
We took in an instance of cocktail, which has many comments (but a comment belongs to a cocktail). From there we iterated over the array of comments and created a new <p> element to hold the stored comment. Lastly, if the value is truthy, we appended it to the cocktail container. Where we had originally faltered, however, was how to get the container for the specific cocktail we are rendering for, rather than having our querySelector bring back the first element that matched the HTML element for cocktailCard. We did this by finding the larger HTML element that held the :id for the cocktail in its :id, and from there finding the specific HTML element associated with that :id on which to append the comment.
Lastly, we wanted to have a User be able to create their own cocktail. We used Javascript in order to tackle toggling the form when the “Create” button is clicked in the top left corner.
The form drops down beneath the massive “Welcome” sign, and if you click the “Create” button again (who’s inner text has now changed to “Hide Menu”), it will bring the form right back up. Once a user submits the form, Javascript stops the page from reloading, updates the database and renders the new cocktail at the very top of the list. Viola!
