mostafasalem12 / forkify-app Goto Github PK

A recipe search application made with javascript.
Explore the docs »

View Demo · ·

This project is a part of the course provided by jonas and owner reserved the rights. You can check the course at the below link.

Forkify is a vanilla JavaScript application that interacts with the Forkify API to fetch and display recipe food data. This app uses modern JavaScript tools, such as Webpack to bundle the modules, and Babel to convert ES6, ES7 and ES8 back to ES5. 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.

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

• HTML
• SCSS
• JavaScript
• Webpack
• NPM

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.

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

• npm

  npm install npm@latest -g

1. Get a free API Key at Forkify API_KEY
2. Clone the repo

   git clone https://github.com/PawanJS_/forkify.git

3. Install NPM packages

   npm install

4. Enter your API in config.js

   const KEY = 'ENTER YOUR API';

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.

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.

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Mostafa Salem - Say Hie

Project Link: https://mostafa-forkify.netlify.app/

• Course : (https://www.udemy.com/course/the-complete-javascript-course/)
• Img Shields
• Netlify
• Webpack
• Google Fonts