Building A Recipe App

Introduction

For my final project of the She Code Africa mentorship program, JavaScript track, I built a recipe app using HTML, CSS, vanilla JavaScript, Parcel, Axios, and a free recipe API: forkify-api.herokuapp.com

During my training in the mentorship program, I became more familiar with basic and advanced JavaScript concepts such as arrays, objects, and consuming APIs. By working on this project, I was able to put them all and more into practice. In this article, I will be explaining briefly the functionalities of the recipe app and how they were implemented.

The Recipe App

The recipe app is a desktop web application where a user can search for a particular food and get access to various recipes for that food. The user can also view each recipe, add a recipe to a shopping list, add a recipe to a favourites list and navigate to the website showing full details about the recipe. The recipe app also shows a random recipe each time a button is clicked.

The search functionality.

The search functionality was implemented using an input element, a submit button, Axios and the API endpoint: forkify-api.herokuapp.com/api/search?q={keyword}. Where the keyword represents the food to be searched for.

A user enters a particular food in the search bar, such as, "Pizza", and this gets inserted into the API endpoint. forkify-api.herokuapp.com/api/search?q=pizza

A GET request is then sent to this endpoint and a JSON object returning data about various pizza recipes is returned. The JSON object is then used to fill the DOM using HTML elements.

Pagination functionality

When a user submits a specific food into the search bar and a list of recipes is returned, only 10 recipes are displayed on the page at a time, and there are buttons which when clicked, show the next or previous list of 10 recipes.

This was achieved by dividing the number of recipes returned by 10, and using the array slice method to return 10 recipes at a time.

The view-recipe functionality

Each time a recipe is clicked, the id of the clicked recipe is inserted into another API endpoint. forkify-api.herokuapp.com/api/get?rId={id}. For example, a pizza recipe id of 47746: forkify-api.herokuapp.com/api/get?rId=47746

Again, a GET request is also sent to the endpoint and a JSON object containing more data about the recipe is returned. The data is then used to fill the DOM. A link to view the website of the chosen recipe is also provided and the user is able to navigate to the website when the link is clicked.

The favourites list functionality

A user is able to add a recipe to a list of liked recipes by clicking on the "Add to favourites" button, and also view the list of liked recipes by clicking on the heart icon on the header. A user is also able to remove recipes from the favourites list. Using the window localStorage API, the favourites list of a particular user is saved to the browser even after it is reloaded.

Random recipe functionality

A user is able to generate a random recipe by clicking on the "Generate Recipe" button. When the button is clicked, a modal showing a random recipe appears. Using the Math.random() function, I generated a random recipe from the array of recipes returned.