Phase 1: Portfolio Project

Hello, this is going to be a blog post about my project for phase 1 at Flatiron School. here are the requirements for the project;

• The web app must be a single page application
• Web app must be HTML/CSS/JS frontend that uses API data. The client and the API must be handled asynchronously and use JSON
• There must be at least 3 separate event listeners

So there it is, seemed very daunting at first seeing as I have never worked with JSON data from an API outside of labs in class. I spent many hours figuring out answers to problems. I found that working one tiny step at a time worked best. I will give you an example.

So the idea was to be able to show recipes and then be able to filter through them at will. Seems simple enough until you are staring down an empty html file wondering how your going to create unique code to do specific things that you want. First thing I did was post all of the recipes on “DOMLOADEDCONTENT” then I created a button. Then I made a function that changed the recipes that were shown and set an event listener to that button. It clicked in my head, something complicated broken down to the simplest steps was easy. I could do anything I wanted with HTML/CSS/JAVASCRIPT it just mattered how much time and effort I put in. That was my biggest takeaway from this project hands down.

Functionality of the web app;

The very first thing that happens when you load the web app is that the body of the page is filled up with images and titles of recipes from the API. The next thing you will notice is a sidebar that allows you to filter through the recipes.

This sidebar has 4 different drop down menus that you can select from. When you click on filter it changes the endpoint of the API so that you get specific recipes that you are looking for. This process is done with interpolation.

The next thing that you can do with the web app is click on the recipes that you want to add to your shopping list. When you click anywhere on the image of the recipe the title of the dish is inserted into the shopping list.

Once you have added recipes into the shopping list you can either click on the shopping list or clear button. Clear simply removes all selected recipes from the list and the modal that would appear if you click on shipping list as seen below.

The final functionality of the page is the ability to look at the individual ingredients and the measurement required to render the recipe. You can either click print to prompt the print screen or close to close the modal.

I have now shown to you the requirements to my Project 1 Portfolio and the functionally of the web app that meets the requirements. I want to descripe my future goals with this app now.

I plan to continue developing this project into its full form so that I may actually use it to 100% of its potential. I had the idea with the real world application in mind because that is something that I wish I had in my every day repertoire . I will continue with blog posts updating my web app in hopes to developing a real tool that can be used by millions.