Scribd
Upload
7 views2 pages

Requirement

Uploaded by

omar.sabil.official01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

Requirement

Uploaded by

omar.sabil.official01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

B-9 A-7 Requirement Doc

Main Requirements

1. Follow the Figma design: Your website design should be similar to the
Figma. You can change the color but choose a color palette that will be
pleasing to the eye.

2. NavBar: A navbar with a website name or logo on the left side & 4 menu
items in the middle: Home, Recipes, About, and Search. A search bar with
a search icon and search text & User icon at right.

3. Banner section: It will contain a banner with background image, title,


short description & 2 buttons named- Explore Now, and Our Feedback.
Don’t use lorem ipsum text.

4. JSON: Create a JSON File with a minimum of 6 data. Each data will contain-
a. Recipe image
b. recipe_id
c. Recipe name
d. Short description
e. Ingredients in an array.
For example: [ “550 g chicken”, “120 ml soy sauce”, “200 g basil
leaf”, “400 g mushroom”]
f. Preparing time → For example: 30 min
g. Calories → For example: 320 calories

5. Our Recipes: Our recipes Heading & short description at the beginning of
this section. Don’t use lorem ipsum text.

6. Recipe card section: The left side of the page will contain a minimum of 6
recipe cards.
a. Load all the JSON data and show it on the card. Each card will
contain
i. Recipe image
ii. Recipe name
iii. Short description
iv. Ingredients length & show ingredients in an unordered list
v. Preparing time
vi. Calories
vii. A button named Want to Cook

7. SideBar: When you click on the Want to Cook Button it will add the clicked
recipe on the sidebar’s Want to Cook table.
a. You need to increase the count of the want to cook table
b. In the Want to Cook table For each table data Show the recipe
name, preparation time, calories and a Preparing Button
c. You can not select a single recipe more than once. When you try to
click the want to cook button more than once it will show a toast

Challenges Requirements:

● When you click the Preparing button of a recipe


a. it will remove the data from the Want to Cook table,
b. decrease the count of the Want to Cook table
c. and add it to Currently Cooking table,
d. In Currently Cooking table, each table data will show the recipe
name, preparation time & calories.
e. increase the count on currently cooking table

Optional : (Recommended to Implement)


● Below the tables, you need to calculate the total preparation time &
total calories of the added recipes.
● Make responsive for mobile device

You might also like