ProGrad Lab | REACT - Pro Nutrition
Learning Goals
In this exercise, the goal is to apply as many as possible of the concepts you've just learned:
- props and state in react,
- event handling in react.
Getting started
- Fork this repo
- Clone this repo
Whenever you create a first significant change, you should make your first commit.
- Follow these guidelines to add, commit and push changes.
In the end of this document, you will find guidelines on how to submit the exercise.
Introduction
You just realized that since the beginning of the bootcamp, your diet is not healthy and it may have an impact on your health (and productivity), now and in the long term.
To take care of the food you eat, you decided to create a nutrition app that will track everything you eat!
So let's get started!
FoodBox
component
Progression 1 | Create Create a FoodBox
component that takes at least food
as a prop and displays a box with all the information about an ingredient.
You can use this HTML snippet to display properly the FoodBox
:
<div className="box">
<article className="media">
<div className="media-left">
<figure className="image is-64x64">
<img src="https://i.imgur.com/eTmWoAN.png" />
</figure>
</div>
<div className="media-content">
<div className="content">
<p>
<strong>Pizza</strong> <br />
<small>400 cal</small>
</p>
</div>
</div>
<div className="media-right">
<div className="field has-addons">
<div className="control">
<input className="input" type="number" value="1" />
</div>
<div className="control">
<button className="button is-info">
+
</button>
</div>
</div>
</div>
</article>
</div>
Progression 2 | Display food
In your App
component (your main component), display as many FoodBox
as elements inside the variable foods
.
Progression 3 | Implement search bar
Create a Search
component to perform a search that updates the list of all meal.
Progression 4 | Create add buttons
On your FoodBox
, you have an input an "+" button. Use them so that when a user clicks on the button, it adds them on a list on the right called "Today's foods".
You will also need to display the total amount of calories at the bottom of the list as a recap.
Progression 5 | Bonus | Group ingredients
You made an awesome application, but you have found a little problem in the UX. For example, if you click twice on "Apple", it will display 2 lines "1 Apple = 400 cal" instead of 1 line "2 Apple = 800 cal". Fix that problem.
Progression 6 | Bonus | Allow the user to remove an ingredient
On the "Today's food", add a trash icon to let users removing one of their items.
Happy coding! ❤️