In this project, I used the most updated React Js futures with Styled Components; I used React Transition Group to animate when to mount or unmount something from DOM. The project has a responsive design for all devices with the most updated CSS features.
Netlify Link: https://festive-hodgkin-a75a63.netlify.com
In this project, I have eight states that control name, price etc. Also, I needed to set a timer for hiding the snackbar that fires alert to show pieces of information to the user after five seconds. But I had a problem if I want to fire another alert in five seconds. That's why I used useEffect Hook; set the timer when the component mount, clean the timer when the component unmount.
I set the name and the price with the 'onChange' event. There was a problem with the 'priceValue' if user types '0' as a first number. I prevent it with the help of 'slice()' method if the first number of price equal to the '0'.
After handling values, I save the item when the user click the 'ADD' button. I prevented submitting and showed the snackbar alert if values are not valid. If values are valid, I created a new object and added it to my 'item' array for mapping through on it. I calculated the total price, reset name, price and count values and showed user a message with the alert.
When the user clicks the 'X' button that stays right of each item, they can delete the item from the list. I did it with the filter method. After removing the item, I calculated the total price again and showed the user another alert.
I calculated the total price with the map function. I multiply price with count for each item and add to the 'total' variable.
Users can't decrease the item count if it is equal to the 0.
Users can't add an item if there is no name.
Users can't add negative price value or no price value.
Users can't add 0 to the price as a first digit.
If there is no item, I show a warning instead of an empty table; I don't show the total price.
Users can see the item name when they add to the list or delete it from the list on the alert.
I applied 'toFixed(2)' method to the total price. Users don't see large numbers after the dot.
I used Grid CSS in this project. It was easy to make the app responsive.
I animated counter digit conditionaly. Users see different animations when they increase or decrease the item count.
I used the React Transition Group to animate the item when I add or delete it
