Design comparison
Solution retrospective
I have reworked this challenge based on advice regarding aesthetics and logic handling, particularly concerning the buttons. One issue I would like to improve is finding a cleaner way to manage states across the different components. In this case, the component declarations became a bit verbose, and I also believe there is some prop drilling present in this solution.
Community feedback
- @JIH7Posted over 1 year ago
Looks good! Aesthetically I would make the start button have a hover effect even though it's not supposed to do anything. That one aspect feels a little lifeless as is. Also giving a transition property to the buttons so the hover fades in is a great way to make the buttons way more satisfying!
In my personal taste, I would turn the 5 buttons on the rating page into a component, but for this particular project they're simple enough that that's debatable. I do think it's ultimately a little more effort to type:
<button className={``rating-button ${checkIsSelected(1)}``} onClick={() => setSelectedRating(1)}>1</button>Than to type:
<Button text='1' handleClick={setSelectedRating}/>And just let the internal logic of the button component handle everything else.
Marked as helpful1@CaceresCallieriPosted over 1 year ago@JIH7 Thank you for the advice! I agree, componentizing the Rating Buttons would have been the best approach, both in terms of readability and handling the logic. Thanks for the pointers regarding the aesthetics and feeling of the page; I will try to improve the challenge following your advice!
1
Please log in to post a comment
Log in with GitHub
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