CSS, HTML and javascript
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kkalvaa
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).
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord