@HYDROCODER
Posted
Hey there! Great work! There are a few suggestions I would suggest if you don't mind:
-
You do not need two breakpoints; just follow a mobile-first approach and then you can use one breakpoint for larger screen sizes.
-
Below the 741px breakpoint, the whole component extends to the entire viewport and it doesn't look good; all you have to do is set a max-width on your component and it will not extend beyond that. You can change this max-width for larger screen sizes, as it extends even at larger screen sizes.
-
There is a js issue with you solution. Suppose the user enters all the inputs and get the total bill and tip amount, if he changes either the bill or the tip-percent inputs after this, the total bill and tip amount do not change, unless the user changes the number of people input. The problem is that you have used a click listener just for the number of people input and as a result, the output changes only if number of people changes. If I am correct and if you can just replace the blur or focus listener for your inputs to change listener, every time the user changes any of the inputs, the total bill and tip amount changes in real time. I would suggest you ponder around with this, but I guess its fine as the user can just reset the whole thing and it works again.
Again, your solution works; what I have suggested above is just another improvement which you can try if you wish.
Hope it helps :).
Marked as helpful
