Hey ! I just made this tip calculator in React.
I think some of my state management might be a bit overkill in some places, I'd love to hear if you got any tips to simplify it ! :)
It was especially overkill in the inputs state management : to get an icon next to it, I wrapped it in a div, and had to find a new way to get the HTML input validation to apply specific style on the parent div to achieve the final result asked.
Maybe there's some better solution ? Let me know what you think of my solution ! :)
I don't think your state is overkill at all! That seems like a great way to handle each interactive component. Some suggestions, right now the input for the bill and number of people have numbers inside them when the page loads. It's uncomfortable to have to erase what's already there to put in my own numbers. What you can do is set an initial value for the buttons when the page first loads and then change the value when something is typed in. Remove the number's that are inside the input fields and put them in a placeholder attribute. That way the numbers are still there, but when I click on the field, I don't have to erase what's already in there. Other than that, it works great!
Sizing-wise, it's a bit uncomfortable because it doesn't fit on the screen very well. The logo touches the top and the calculate touches the bottom of the screen. I would suggest putting some margins or padding on the top and bottom to make it a little more comfortable, and maybe reduce the overall spacing. There's quite a bit of space between each section of the calculator.
Great job! It looks good. A couple suggestion: try using flexbox properties to center your component on the screen. It'll help center your component vertically. Also, the <div class="plan"> element doesn't have a closing tag! And to increase the accessibility of the component, you should change the <div class="attribution> tag to a footer tag instead. Other than that, it looks great! Good job on achieving the same style as the design.
