Interactive Rating Component

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Smaragda, how are you?

  to solve your problem, we can do this:

  Let's add the code in the same scope as the selectedRating function, so it will look like this:

  ratings.forEach((element) => {
    element.addEventListener("click", (e) => {
      ratings.forEach(element => {
        element.classList.remove("card-rating__clicked")
      })
  
      e.target.classList.add('card-rating__clicked');
    })
  })
  

  we need to put it in the same scope because of the ratings variable, what is happening there it is making a loop when we click on the button and it is removing the classes that are active, but how to make this loop we are clicking on the button the last thing that it does before exiting the event code block is to add the 'card-rating__clicked' class!

  I hope it's clear!

  0

  ---

  

  Smaragda•20

  @smara-gdaPosted about 2 years ago

  @AdrianoEscarabote Thank you for your feedback! I am going to work on it.

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @smara-gda tell me if it works!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Regarding your question,

  The color is the other way around. When you :hover over the buttons, it should be orange. Once a button has been selected it should be a grey color.

  • The proper way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👻🎃

  0

  ---

  

  Smaragda•20

  @smara-gdaPosted about 2 years ago

  @vcarames thank you so much for your feedback! I'll work on it.

  0