Recipe Realm is a web application designed to help users find recipes based on their search queries. Utilizing the Edamam Recipe API, the application allows users to search for recipes and view detailed information, including calorie count, diet labels, and health labels.
Finding recipes that meet specific dietary requirements or preferences can be challenging. Users often need a tool to quickly search for recipes and obtain detailed nutritional and dietary information. Recipe Realm addresses this need by providing a user-friendly interface for searching and displaying recipes.
Recipe Realm offers a streamlined web application where users can search for recipes and view detailed information about each recipe. The application retrieves data from the Edamam Recipe API and presents it in a clear, visually appealing format.
- Recipe Search: Users can search for recipes based on their queries.
- Detailed Recipe Information: Displays information such as calories, diet labels, and health labels.
- Responsive Design: Adaptable layout for different screen sizes.
- User-friendly Interface: Easy navigation and search functionality.
- HTML: Structure of the web application.
- CSS: Styling and layout of the application.
- JavaScript: Handles form submission, API requests, and dynamic content generation.
- Edamam Recipe API: Provides recipe data based on search queries.
- Open the Application: Load the index.html file in a web browser.
- Search for Recipes: Enter a search query in the input field and submit the form.
- View Results: Browse the search results displayed on the page, including recipe images, calorie counts, and other relevant information.
- Edamam Recipe API: For retrieving recipe data. You need to replace APP_ID and APP_key with your own credentials from Edamam.
- Ionicons: For the search icon in the form.
- Google Fonts: Used for typography.
-
Download or Clone the Repository: Clone or download the repository to your local machine.
git clone https://github.com/kittu-122/Recipe-app-with-vanilla.js.git
-
Replace API Keys: Obtain API keys from Edamam and replace APP_ID and APP_key in main.js with your own credentials.
-
Open the Application: Open index.html in a web browser to use the application.
Contributions are welcome! To contribute:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature/your-feature-name
- Make your changes and commit them:
git commit -m 'Add your feature description'
- Push to the branch:
git push origin feature/your-feature-name
- Open a pull request with a description of your changes.
Thank you for choosing this project. Hoping that this project proves useful and delivers a seamless experience for your needs!