Skip to content

🥞 A delicious journey through food. This vanilla JavaScript application explores the world of recipe food data, interacting with the Forkify API to fetch and display information. Search for your favorite recipes, save them to a favorites list and easily adjust servings to fit your needs.

License

Notifications You must be signed in to change notification settings

adriiiiiix/forkify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Screenshots

logo ab084ead

Forkify

Forkify is a vanilla JavaScript application that interacts with the Forkify API to fetch and display recipe food data. The user can search for a specific recipe, and save to a favorites list via local storage. The user can easily increase or decrease servings as per his need and can view detailed directions.

Built With

This app is built with pure vanilla JavaScript along with HTML and SCSS. It uses webpack as module bundler and NPM as package manager.

Getting Started

To get started with project just simply fork this repo or download locally on your System.

To get a local copy up and running follow these simple example steps.

Prerequisites

Start with the latest version of NPM to avoid any errors:

  • npm
    npm install npm@latest -g
  • Also install additional dependencies
 npm i --save core-js regenerator-runtime

Installation

  1. Get a free API Key at Forkify API_KEY
  2. Clone the repo
    git clone https://github.com/adriiiiiix/forkify
  3. Install NPM packages
    npm install
  4. Enter your API in config.js
    const KEY = 'ENTER YOUR API';

Usage

  1. The Forkify Recipe App allows users to search for recipes.

  2. Users can view the recipe along with the cook time and also increase or decrease the amount of servings they need.

  3. Bookmarked recipes are stored in local storage so no database was required for this application.

For more examples, please refer to the Documentation

Proposed features

  1. Number of pages between the pagination buttons.

  2. Ability to sort search results by duration or number of ingredients.

  3. Ingredient validation in view, before submitting the form.

  4. Improving recipe ingredient input: separate in multiple fields and allow more than 6 ingredients.

  5. Shopping list feature: button on recipe to add ingredients to a list.

  6. Weekly meal planning feature: assign recipes to the next 7 days and show on a weekly calendar.

  7. Nutrition data on each ingredient from spoonacular API (https:// spoonacular.com/food-api) and calculate total calories of recipe.

About

🥞 A delicious journey through food. This vanilla JavaScript application explores the world of recipe food data, interacting with the Forkify API to fetch and display information. Search for your favorite recipes, save them to a favorites list and easily adjust servings to fit your needs.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published