Interactive rating component (HTML, CSS, and Vanilla Javascript)

Community feedback

• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  I'm posting this as a separate comment and not a reply in case you find this helpful.

  After clicking a rating button, it turns a lighter grey, which indicates that the user has selected that rating. This is fine and expected.

  However, clicking off the button causes it to go back to its default styling, which suggests that it's no longer selected, but pressing the submit button will cause the page to proceed to the 'thank you' page with that rating anyway.

  I see you have an event listener that changes the innerHTML of the rating message on the 'thank you' page when the user clicks on a rating button:

  rates.forEach((rate) => {
    rate.addEventListener("click", () => {
      rating.innerHTML = rate.innerHTML;
    });
  });
  

  I suggest listening for a click outside of a rating button (and also not on the submit button) to reset the rating.innerHTML back to "" to make the functionality of the page more intuitive.

  Alternatively, you could make it so that the button does not appear to lose focus upon clicking off it, which might be an easier approach.

  Hope this helps! :)

  13

  Marked as helpful
• 

  Sardor•110

  @sardorw

  Posted over 1 year ago

  Nice work

  10
• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  Great work! This is a really good solution to this challenge. The buttons work well, and the styling very closely resembles the design mockups, so well done.

  However, one thing I would point out is that the body's height property is set to 100vh, which causes some issues when the screen size is too small to fit the entire card vertically. In other words, when the height of the card is greater than the height of the viewport.

  A simple fix for this is changing height to min-height and leaving the value at 100vh. This will make the body take up the entire viewport height while still letting it expand if necessary.

  02