this project is for indorse intermediate React Sill validation
This assignment is catered towards invoking healthy habits in this world where rising levels of junk food, fast food, and unhealthy drinks are causing obesity and giving rise to many diseases in populations all across the world.
This web UI will read from a static JSON object instead of connecting to a backend API. You can enter a list of various junk food items and drinks like Coke, Fries, etc. and display this information to the user.
Basic feature of the application should include:
-
Create a web UI with a text box containing auto-complete options to be filled up by the food item names from the JSON object
-
Once the user selects an item, you need to show all the information about the item
-
This information could consist of, but not limited to, the photo of the item, the ingredients, calorie content, etc
-
[Bonus] You can also make a comparison between the items in your JSON object and show a calorie ranking for this item
-
Create a
JSONObject for all food details -
Foods details are includes
- Name
- Description
- Fat
- Calorie
- Ingredients
- Img
- Link
-
Search Field
-
Create a Nice
AutocompleteBox, When users Entered Any Value in Search Field this box will popup and show users the foods name. -
If Users Enter Wrong Food then A predefined Box will render and Tell user that, Users Entered Wrong Details
-
If User Search with Correct foods name then A Details box will render with all food details
-
Create a Page for
All Food Details, In the Page User can see all food withNameCalorieFatDetails, and User Can alsosortvalues. (This is my favorite Implementation) -
Not FoundPage -
Of course it's
Responsive -
Write Some
TestwithEnzyme
npm install or yarn install
and
npm start or yarn start
- Lodash - For Sorting
- React Bootstrap
- Enzyme
- Enzyme-Adapter
- Redux
#Which websites Helps me to get those datas