A visually appealing webpage that showcases various food recipes with cooking instructions and ingredients fetched dynamically via an API call. Built with HTML, CSS, and JavaScript, this project highlights the integration of APIs for creating interactive and user-friendly web applications. π
- π² Recipe List: Browse a variety of food recipes.
- π Detailed Recipe Info: View cooking instructions and required ingredients for each recipe.
- π API Integration: Recipes are fetched dynamically using an API.
- π¨ Responsive Design: Optimized for all devices.
- HTML: Structure of the webpage
- CSS: Styling for a clean and responsive UI
- JavaScript: API integration and dynamic rendering
-
Clone the repository:
git clone https://github.com/yourusername/food-recipe-preview.git cd food-recipe-preview -
Open
index.htmlin your browser to explore delicious recipes! π³
food-recipe-preview/
βββ index.html # Main HTML file
βββ styles.css # CSS file for styling
βββ app.js # JavaScript file for API calls and functionality
βββ README.md # About the project
- API Call: Fetches a list of recipes with details from a food API.
- Dynamic Rendering: Recipes are displayed dynamically on the webpage.
- Recipe Details: Clicking on a recipe shows ingredients and step-by-step cooking instructions.
- π Add a search bar to find recipes by name or ingredients.
- β Implement a favorite recipes feature to save preferred recipes.
- π Support for multiple cuisines and dietary preferences.
Contributions are welcome!
- Fork the repository π΄
- Create a feature branch π
- Submit a pull request π οΈ
This project is licensed under the MIT License.
Dive into the world of recipes and start cooking today! π¨βπ³π©βπ³