Interactive rating component with JS

Community feedback

• 

  Benevolent•490

  @bene-volent

  Posted about 2 years ago

  Hi there, congrats on completing the solution. The first time is always hard.

  Few recommendations if you won't mind:

  1. As the following is a component (assuming a part of larger component), consider enclosing it in a div or an article in itself for increasing modularity.
  2. As you are using button[type=submit], you should consider using a form where the ratings are actually radio buttons with each one storing a rating value and using attached label to show the values instead of button as buttons are only for pressing and not having a [Pressed or Active or Checked] state. check out my solution if you need an example. I also learnt it from someone else.
  3. Try validating the form, for example, I can just press submit and it allows me to submit. Try validating whether a rating is already selected or not. If not don't show second screen and tell the user that a rating should be selected. This can be done by disabling by lightening the color of submit button or having an animation on it.

  Try them one at a time if you have time, and re evaluate your solution. Everyone learns one step at a time

  02

  Marked as helpful
• 

  Aimal Khan•2,260

  @Aimal-125

  Posted about 2 years ago

  Bro your card component is looking great on my desktop but when i checked it on my j3 mobile device it is invisible from top. So, to eradicate this problem use height: 120vh; or height: 150vh; by using media query with max-height: 400px; ::)

  01

  Marked as helpful