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.
-
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.)
- 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.
- Edamam API for providing the recipe data.