@VenusY
Posted
Good work on this solution! It's responsive and, functionality-wise, it works fairly well.
There are some small issues that could be fixed though.
There is no padding on the body, so when the viewport is small enough, there is no space between the card and the viewport, which isn't ideal for user experience.
To fix this, you could simply add padding to the body with a size of your choice:
body {
padding: 50px;
}
I noticed that you applied margin: auto; to the <main> tag, which I'm assuming was to center it on the page.
However, since the body already has the display: flex;, justify-content: center;, and align-items: center; properties, this isn't necessary and doesn't affect the layout of the page, so you can remove it without any issues.
When a user clicks the submit button without pressing a rating first, it still proceeds to the 'thank you' page.
You can prevent this by toggling an "active" class on a rating button whenever the user clicks on or off it, then checking for the existence of this class on any of the rating buttons before displaying the 'thank you' page.
Another thing I noticed was that, even though clicking off a rating button causes its colour to revert back to its non-active state, it's technically still clicked and pressing the submit button in this scenario causes the 'thank you' page to display with that rating anyway.
This solution was otherwise very good, and well done for completing the challenge! :)
Marked as helpful
