# Food Recipe App

<!-- TABLE OF CONTENTS -->
<details open="open">
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
    <li>
      <a href="#concepts-used">Concepts used</a>
    </li>
    <li>
      <a href="#best-way-to-learn">Best way to Learn</a>
    </li>
  </ol>
</details>

<!-- ABOUT THE PROJECT -->

## About The Project

![Food Recipe App](https://user-images.githubusercontent.com/55245862/128337004-69a992cf-7c01-470e-a16c-548572308ce3.png)
![Food Recipe App](https://user-images.githubusercontent.com/55245862/128337078-0f8e8d70-8f00-4ea7-b0ba-8cd40bb10e5e.png)

This Project is a intermediate JavaScript project. Recipe app finds the recipes on the basis of searched ingredient. 

When user press enter after entering the ingredient name, then the JavaScript fetch the data from the api, it displays the information like images, recipe and meal type related to the searched item.

### Concepts used

This section lists the JavaScript concepts that were used while making this project.

- [api_fetch](https://www.w3schools.com/js/js_api_fetch.asp)
- [querySelector](https://www.w3schools.com/jsref/met_document_queryselector.asp)
- [getElementById](https://www.w3schools.com/jsref/met_document_getelementbyid.asp)
- [addEventListener](https://www.w3schools.com/jsref/met_element_addeventlistener.asp)
- [map](https://www.w3schools.com/jsref/jsref_map.asp)
- [forEach](https://www.w3schools.com/jsref/jsref_foreach.asp)
<!-- USAGE EXAMPLES -->

## Best Way to Learn

The best way to work on this project is :

- Get a good grasp of the idea and what we are trying to create.
- Read about the concepts used.
- With both the above points done , try to make the project on your own.
- Give it some try and take help from the code in this repository.