Interactive Rating Component

Community feedback

• 

  Abdul Subhan•1,090

  @Esabdul

  Posted 12 days ago

  In your HTML, you are using onclick="activeButton()" inside each of the rating buttons.

  But in your JavaScript, you’re also attaching click event listeners using addEventListener.

  You don’t need both, it is actually better to keep all your logic in the JS file to separate structure from behavior. .

  The activeButton() function just enables the submit button.

  Instead of calling that separately, you could just move the submitButton.disabled = false; line into your existing click handler.

  That way, when a rating is selected, it becomes active visually and enables the button, all in one place.

  The other thing I noticed is that your CSS is written using SCSS-style nesting.

  For example, inside your body styles, you’re nesting main, and within that nesting .rating__card__container, and so on. This won’t work directly in the browser because plain CSS doesn't support nested rules.

  SCSS or Sass compilers can handle that, but since you’re linking a regular .css file, the browser will just ignore anything inside those nested blocks.

  20

  Marked as helpful