Interactive rating component

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Kate Dames, how are you?

  Answering your question about the star image, we can add a parent div around the star and put the padding in that div!

  To solve the submit button problem we can do this:

  rateSelected.forEach((rateSelected) => {
      rateSelected.addEventListener("click", () => {
          let counter = rateSelected.innerHTML;
          rating.innerHTML = counter;
          submitButton.addEventListener("click", () => {
              submitRatingCard.classList.toggle("hidden");
              thanksCard.classList.toggle("hidden");
          })
      })
  })
  

  I changed the order so the button will only change the classes when we click the button to rating. There are other ways to do this but this is the easiest!

  I hope it helps...

  0

  ---

  

  Kate Dames•250

  @funficientPosted about 2 years ago

  @AdrianoEscarabote Thank you for your help! The div around the star image works!

  The submit button, however, doesn't. :-(

  My logic:

  • If a rating is selected, update counter with the value of the selected button.
  • If nothing was selected, update counter with '0'. (Ideally I would like to display an error message, but if I can just get a 0 to show that would already be an improvement).
  • Show the thank you card with the counter value (which can be 0 - 5).

  So in other words, if the user presses submit without selecting a number rating first, the value becomes 0.

  Thank you for your help! K

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @funficient strange because I took the test here and it worked! but no problem, glad to have helped in any way!

  0