Interactive Rating Component using Tailwind CSS and vanilla JS

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Wilouricard,

  Congrats on completing the challenge

  Just a suggestion, instead of giving 5 when no rating is selected I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked.

  Marked as helpful

  1

  ---

  

  Wilou Nam•320

  @WilouricardPosted about 2 years ago

  @hyrongennike Thank you for the recommendation, I made the changes, and I also decreased opacity when the button is disabled.

  I tried to setAttribute("disabled") to add back "disabled" attribute to the submit button when I click on the "Go Back" button, but it did not work. Do you have any advice regarding this issue, please?

  Thanks a lot, Hyron

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @Wilouricard you can use this submitButton.disabled = true

  Marked as helpful

  1

  

  Wilou Nam•320

  @WilouricardPosted about 2 years ago

  @hyrongennike Thank you again :)

  A last question: I used focus: to state the button. But how can I do to let the focus state on of the rating button, even if I am clicking somewhere else (on the container or body for example)?

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @Wilouricard Do you mean you want it to stay selected even when clicking on the body?

  0

  

  Wilou Nam•320

  @WilouricardPosted about 2 years ago

  @hyrongennike Yes

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @Wilouricard you can have an .active class on the btn that changes the background color but you have loop over all the button first to removes the class before adding it on the one that is being clicked on to prevent multiple selected button. You can check my solution below.

  my solution

  0