Flipping interactive rating component

Community feedback

• 

  d8701a•240

  @d8701aPosted about 1 year ago

  Hello and congrats on completing this challenge!

  The flipping card idea was awesome, it looks smooth and much more elegant than simply replacing one card with a thanks-card, although both solutions are correct and acceptable.

  You chose a rather unusual solution, with rating buttons 1-5. Most of the solutions I saw here were just adding a button element in HTML and then styling it as necessary in CSS. You decided to go with radio buttons instead, which maybe generates a bit more HTML code but in the end, if it gives you a desired result - go for it!

  Your code seems alright to me. Maybe try using more descriptive names for icons and images. For example: <div class="star"> <img src="images/icon-star.svg" role="presentation" /> </div>

  If someone else gets to work on your project, the code is more readable and understandable if the classes have descriptive names. For example star-icon would be more appropriate in this case, so anyone looking at your CSS will know what this class does. If you only put div class = star, it's hard to see without checking the HTML if that star is an image, a logo or an icon.

  However, your solution is very interesting, your code looks good and I think you are definitely on the right path, just keep it up! :)

  Marked as helpful

  0

  ---

  

  David Tejada•380

  @david-tejadaPosted about 1 year ago

  @d8701a I don't think my solution for the rating buttons is unusual. I don't want to say that is the right one but I think it is the most appropriate if you want to represent a group of options in which only one of them can be checked at any point. It is more difficult to style but the alternative is also complex if you want to make it right and definitely easier to get it wrong. For example, your solution is not accessible by keyboard. I can't select any of the ratings using just the keyboard. Actually, I can select them but they don't get marked. I also can't use the left and right keys to select a different rating. And I can't use tab to jump to the next control and I am forced to go through all the rating buttons to get to the submit button. I can also submit without any of the options being checked, and I get a thank you card with "You selected out of 5". All of those things are easier to get right if you just use the right element.

  You are right about the star class not being very descriptive.

  Thanks for the feedback!

  0