Interactive rating

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the <Main> Element.

  • Change width to max-width in your component’s container to make it responsive. You will also want to delete the height as it is unnecessary.

  • 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! 🍂🦃

  Marked as helpful

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi BlunderBarry, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that you were adding events to each button manually, we can do this same functionality but in a faster and smaller way.

  First we will strip all events from these numbers.

  Removed: numbers[0].addEventListener

  after that, we will use the forEach method, it will loop through all the buttons in our NodeList that is inside the variable, and what we pass as a parameter it will execute on each element, like this:

  numbers.forEach(element => {
      element.addEventListener("click", () => {
          rating.innerHTML = "You selected " + element.innerText + " out of 5"
      })
  })
  

  do the test!!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0