https://github.com/billalben/cook.io-recipe
https://github.com/billalben/cook.io-recipe
api css html javascript recipe-app responsive-design
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/billalben/cook.io-recipe
- Owner: billalben
- Created: 2024-01-06T15:53:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-14T09:36:49.000Z (over 1 year ago)
- Last Synced: 2025-03-17T11:36:23.584Z (8 months ago)
- Topics: api, css, html, javascript, recipe-app, responsive-design
- Language: HTML
- Homepage: https://cook-io-recipe.netlify.app/
- Size: 369 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cook-io
Cook-io is a responsive web application designed for food enthusiasts who love to explore and save recipes. Built using HTML, CSS, and JavaScript, it leverages the Edamam API to fetch and display a variety of recipes. The website features a mobile-first design approach and offers functionalities like recipe search, dark/light mode, detailed recipe views, and filtering options.
[**View Demo in Netlify**](https://cook-io-recipe.netlify.app)
## Features
- **Responsive Design:** The website is designed with a mobile-first approach and adapts seamlessly to various screen sizes.
- **Recipe Search:** Users can search for recipes by entering keywords in the search bar.
- **Recipe Details:** Click on any recipe to view detailed information, including ingredients, cooking instructions, and nutritional facts.
- **Save Recipes:** Users can save their favorite recipes to local storage for easy access later.
- **Dark/Light Mode:** Toggle between dark and light themes for a better viewing experience.
- **Filtering Options:** Use the sidebar filters to narrow down recipes by:
- Cooking Time
- Ingredients
- Calories
- Diet (e.g., vegetarian, vegan, etc.)
- Health (e.g., gluten-free, keto, etc.)
- Meal Type (e.g., breakfast, lunch, dinner, etc.)
- Dish Type (e.g., soup, salad, etc.)
- Cuisine Type (e.g., Italian, Mexican, etc.)
## Technologies Used
- **HTML:** For the structure of the web pages.
- **CSS:** For styling the web pages.
- **JavaScript:** For adding interactivity and handling API requests.
- **Edamam API:** To fetch and display recipe data.
## Acknowledgements
- [Edamam API](https://developer.edamam.com/) for providing the recipe data.
-