Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hollali/meal_api
Introducing Recipe Finder, the ultimate recipe search app powered by an extensive API that provides users access to thousands of recipes from around the world. With an intuitive search feature, users can filter recipes based on ingredients, dietary preferences, cuisine type, cooking time, and more.
https://github.com/hollali/meal_api
css3 html javascript json
Last synced: 14 days ago
JSON representation
Introducing Recipe Finder, the ultimate recipe search app powered by an extensive API that provides users access to thousands of recipes from around the world. With an intuitive search feature, users can filter recipes based on ingredients, dietary preferences, cuisine type, cooking time, and more.
- Host: GitHub
- URL: https://github.com/hollali/meal_api
- Owner: hollali
- Created: 2023-11-22T00:21:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-04T11:40:31.000Z (about 1 year ago)
- Last Synced: 2024-11-12T15:14:02.122Z (2 months ago)
- Topics: css3, html, javascript, json
- Language: CSS
- Homepage: https://recipesearch.pxxl.space/
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Meal Search Web App
## Overview
This is a simple web application that allows users to search for meals and discover random recipes. It utilizes HTML for structuring the content, CSS for styling, and JavaScript for interactivity. The app fetches meal data from an external API and displays the results dynamically on the page.
## Features
- **Search for Meal**: Users can enter a meal name in the search bar to find specific recipes.
- **Random Meal**: Users can click the "Random" button to discover a random meal recipe.
- **Dynamic Display**: Meal search results are dynamically displayed on the page.
## Technologies Used
- **HTML**: For structuring the content of the web page.
- **CSS**: For styling and layout design.
- **JavaScript**: For fetching data from an API and dynamically updating the page.
- **Font Awesome**: For icons in the search button.
## Project Structure
- **index.html**: The main HTML file containing the structure of the web page.
- **css/index.css**: CSS file for styling the web page.
- **script/index.js**: JavaScript file for fetching data and updating the page dynamically.
## Usage
1. Open the `index.html` file in a web browser.
2. Enter a meal name in the search bar and click the search button to find specific recipes.
3. Click the "Random" button to discover a random meal recipe.
4. Explore the dynamically displayed meal search results.
5. Click on a specific meal to view detailed information, including ingredients and instructions.
## Additional Notes
- This project uses the [MealDB API](https://www.themealdb.com/api.php) to fetch meal data.
- Ensure that your internet connection is active to fetch data from the API.
## Credits
This project was created by Hollali Kelvin.
## License
This project is licensed under the [MIT License](LICENSE).
Feel free to contribute or report issues!