Interactive rating component

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hi, @Olumide2596. How are you?

  You did an awesome job at implementing the design.

  To learn how to uncheck the previous rating, you can read this little demo code i wrote. Play with it, modify it and if you don't understand someting. Feel free to reach me. https://codepen.io/pradeeps4ini/pen/OJvZGev

  Some suggestions to improve the code:

  • You should use <main> element only to wrap the main content of the page. You should keep the attribution content in a <footer> element and out of the <main> element. These are semantic elements and used to structure the page. You can read more about them here...https://www.freecodecamp.org/news/semantic-html5-elements/.

  • Instead of using min-width: 400px, use max-width: 400px. And remove width: 50%, you won't need it, with max-width: 400px. This will make your container more responsive.

  • In the ratings section, we are interacting with the rating elements. Therefore you should use either <buttons> or <input type="radio">. I prefer <input type="radio">. This is much better for accessibility and readability. Read the page i linked above about semantic elements. You'd get a better understanding of how and for what purpose to use an element.

  Marked as helpful

  0

  ---

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @pradeeps4ini Thanks for your feedback, I have made improvements to my code. I wasn't getting the unchecked previous rating from your code pen. But, I've been able to come up with something by using :focus on the CSS. I'll appreciate further feedback on what I can improve on.

  1

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @Olumide2596 You solution looks good. And using focus to style is a good idea. Thanks for teaching me this.

  Have fun and keep doing more projects.:)

  0

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @pradeeps4ini Thank you 😁

  0
• 

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  Thanks a lot, I will work on it using your feedback

  0