React project that aims to help less experienced developers quickly get hands-on experience in React. The goal is to add functionality and styling issues should be overlooked!
Feel free to make suggetions/improvements and even tag me if you want a code review to your solution :)
- Clone this project to your computer with:
git clone https://github.com/jvaladas/shopping-list-react-exercises.git- Move to the project root directory and install packages:
cd shopping-list-react-exercises
yarn install- Run in the console:
yarn run dev- Access it through the browser at http://localhost:3000 and you should see the following:
-
Format the Price colum so all prices are shown with 2 decimal cases (ex: 2.50€).
-
Add the correct Total amount at the bottom of the shopping list. It currently shows 1.00€ but we want it to show the sum of all our items, while taking into account their quantities.
For example: 2 Avocados (0.75€ each) + 1 Milk (1.30€ each) should show a Total Amount of 2.80€
-
The list has repeated items. Figure out a way to show the repeated items as part of the same item.
For example 4 Strawberries + 2 Strawberries should show in the list as a single Strawberry line with quantity 6.
-
Changing the item quantity in the dropdown does not influence the Total Amount. Find a way to modify the quantity of a single item and have that reflect on the Total Amount.
-
Clicking on the Delete column of a single item should remove it from the Shopping List and the Total Amount should reflect its removal.
That's it! I hope you have fun solving these exercises and that you also find them challenging :D