Our app shows you many Food and Drinks categories , every category contains many meals and drinks and each meal and drink has its own recipe and ingredients.
A lot of housewives and expatriate students don't know how to cook or they see some meals or drinks and they want to know what are its ingredients and recipe .
In our app we let you know about a lot of meals and drinks, what are its ingredients and its recipe.
- When you open the app, at first you will find a landing page that contains our app's logo, the description of the app and a button to go to the next page "Home page".
- After clicking on the "let's start" button in the landing page, you will go to the home page which lets you choose between food's categories or drink's categories by clicking on the image that contains food or drinks respectively.
- If you choose food categories you will go to food's categories page which contains an arrow to go back to the previous page, a slider of buttons for each category and boxes that show category type and an image related to category kind.
- If you choose drinks' categories you will go to drinks' categories page which contains an arrow to go back to the previous page, a slider of buttons for each category and boxes that show the category's type and an image related to category's kind.
- Now you choose a food or drinks category by clicking on specific category's button or category's box, whatever, you will go to food's type or drink's type page.
- Every specific category's page contains category's name, search bar which allow you to search about meals by its name or one of its ingredients and boxes that show category's meal's name, an image related to this meal and a button to get the recipe of this meal.
- After that when you click on "get recipe" button, a pop up will appear that contains the ingredients and recipe in detail of the meal.
- Now you can try to cook any meal or make drink you want 😋🤤.
- As a user, I should see the landing page as a first page.
- As a user, I can navigate to Home page by clicking 'lets start' button.
- As a user, I can back to Landing page by clicking 'arrow' button in Home Page.
- As a user, I can navigate to Categories-Food page by clicking 'food' picture.
- As a user, I can navigate to Categories-Drink page by clicking 'drink' picture.
- As a user, I can back to Home page by clicking 'arrow' button in Categories-Food Page.
- As a user, I can back to Home page by clicking 'arrow' button in Categories-Drink Page.
- As a user, I can navigate to Type-Food page by clicking one of category button or one of images for category in categories-food page.
- As a user, I can navigate to Type-Drink page by clicking one of category button or one of images for category in categories-drink page.
- As a user, I can back to by Categories-Food by clicking 'arrow' button in Type-Food page.
- As a user, I can back to by Categories-Drink by clicking 'arrow' button in Type-Drink page.
- As a user, I can show the popup by clicking 'Get Recipe' button in Type-Food page.
- As a user, I can show the popup by clicking 'Get Recipe' button in Type-Drink page.
- As a user, I can show the Recipe Ingredients by clicking 'Ingredients' button in popup.
- As a user, I can show the Recipe by clicking 'Recipe' button in popup.
- As a user, I can close popup by clicking 'close' button in popup.
- HTML : to build the structure of the pages.
- CSS : to style the pages.
- Javascript (DOM Manipulations) : to create interaction between the pages and the user.
- Javascript (promise) : to fetch data from APIs (TheMealDB API and TheCocktail API.
- local Storage : to store the data.
- Open Git bash wherever you want to install the project.
- write this command
git clone https://github.com/GSG-CF04/TOP-CHEF.git - Now open Top-Chef folder and open index.html file and enjoy 🤩.