@kkalvaa
Posted
A couple of things:
1: Do not use <body> as your component This rating component should be able to be placed on a page somwhere, you can't put a <body> inside of a <body>, unless you use an <iframe> (which you really shouldn't for this). The component should be a <section> or a <div> or possibly an <aside>.
2: You forgot to remove the default border on the button Try "border: 0;" in your css to remove default borders on buttons.
3: The text is the wrong typeface The design is clearly a sans-serif, the finished solution is using serif text.
4: Try adding a transition to the number buttons for the colour change. Transitions are simply easier on the eye than abrupt changes. My favourite: "transition: all ease-out 200ms;"
5: SuccessMessage text goes outside of the main box. Since you're spesifically setting a width on the success message which is larger than the container the text bleeds out of the box. Generally you'll never need to add a spesific width to any child element of a component (at least if you don't hate your life and want to make everything harder than it has to be).
