Design comparison
Solution retrospective
I need help knowing how to measure designs and achieve pixel perfect, as well as concepts for managing states in react.
Community feedback
- @LucianoDLimaPosted 9 months ago
Hey, well done on completing this challenge!
Regarding pixel perfect, that shouldn't be your goal, pixel perfect is pointless since we'd have to do it for every screen size. However I always try to go for pixel perfect too because I'm a perfectionist haha, there is an extension called PerfectPixel that allows you to add an image as an overlay on top of the website to compare them, that way achieving pixel perfect
Regarding state managing, this project is very simple when it comes to states, so the way you did is good already, lifting up state is perfctly normal
Some feedback:
- The score numbers are wrapped around by a
<ul>
list, however you should replace it with a<ol>
since the order matters - There is a bit of repetition in your code that you could address. For example, instead of doing this
<ul> <li><button value={1} onClick={() => handleResult(1)}>1</button></li> <li><button value={2} onClick={() => handleResult(2)}>2</button></li> <li><button value={3} onClick={() => handleResult(3)}>3</button></li> <li><button value={4} onClick={() => handleResult(4)}>4</button></li> <li><button value={5} onClick={() => handleResult(5)}>5</button></li> </ul>
You can do something like this:
const entries = Array.from({ length: 5 }, (_, index) => index + 1) <ul> {entries.map((value) => ( <li key={value}> <button value={value} onClick={() => handleResult(value)}> {value} </button> </li> ))} </ul>
This way you don't need to write the button 5 times, and if the app ever has to scale to a score of 1-10, all you'd have to do is replace the
length: 5
withlength: 10
and it would automatically add the buttons for you- There is also currently a bug where you have to click twice on the score for it to count. So I have to pick a score, click submit, and pick a score again, then click submit again.
Marked as helpful0@amporabipoPosted 9 months ago@LucianoDLima Hello, thank you very much, I think it was the best feedback I have received. I tell you that I'm looking for the perfect pixel because I want to improve my responsiveness... The truth is I haven't made any progress in this in years, generally I'm the only programmer on the teams I'm on and many times I haven't touched code in years... I'm trying to improve thanks for everything
1 - The score numbers are wrapped around by a
Please log in to post a comment
Log in with GitHubJoin 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