Dish Discovery is a web application designed to help users explore and manage recipes from around the world. This project serves as a training exercise on CRUD operations, APIs, and AJAX, utilizing the API from dummyjson.com. It focuses on providing an intuitive user interface where users can discover delicious dishes, save their favorite recipes, and access detailed cooking instructions.
You can view the live demo of Dish Discovery at (https://amrr-maherr.github.io/Dish-Discovery/.
- Fetches and displays recipes from a public API.
- Shows recipes in a responsive grid layout.
- Provides detailed information including image, title, tags, preparation time, and servings.
- Users can add recipes to their cart, view recipe details, and delete recipes as needed.
- Uses AOS (Animate On Scroll) library for smooth scroll-based animations.
To set up this project locally, follow these steps:
-
Clone the Repository:
git clone https://github.com/amrr-maherr/WorldBrief.git
-
Open the Project:
- Open
index.htmlin your web browser.
- Open
- The application will automatically fetch and display the latest recipes from the API.
- Recipes are displayed in a grid format with details including:
- Image: Visual representation of the recipe.
- Title: The name of the recipe.
- Tags: Relevant tags for the recipe.
- Preparation Time: Time required to prepare the dish.
- Servings: Number of servings the recipe provides.
- Users can:
- Add recipes to their cart.
- View recipe details.
- Delete recipes as needed.
index.html: The main HTML file for the application.style.css: Custom styles for the application.script.js: JavaScript file for fetching and displaying recipe data.
- HTML
- CSS
- JavaScript
- Bootstrap: For responsive design.
- Dummy JSON API: For recipe data.
We welcome contributions! If you want to help improve this project, feel free to submit pull requests or open issues. Your input is highly valued!