Interactive rating component

Community feedback

• 

  P

  Luciano Lima•1,290

  @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 with length: 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 helpful

  0

  ---

  

  P

  Andrés R.W.•440

  @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