html css javascript

Community feedback

• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted over 2 years ago

  Hello mclanecorp, how are you?

  I will help you make your code much smaller!

  I noticed that you used an event for each button, we can reduce this a lot by getting all the buttons in just one variable! But first, let's make some changes to the HTML!

  <span id="1" class="btnRate">1</span>

  I changed the name of the classes of all the buttons to the one above.

  ok, now let's go to js:

  We will remove all selecteur events and variables will be removed from the code, then we will add this:

  const btnRate = document.querySelectorAll(".btnRate")

  and I will add something called forEach in that variable that we store all the buttons, so our forEach method will loop in each button, and we will pass as a parameter a function that will work on each element!

  this function will have the addEventListener of type click, and this event will work on all buttons:

  btnRate.forEach((element) => {
    element.addEventListener("click", () => {
      element.classList.toggle("isactive");
      const sum = element.innerText
      document.getElementById("choix1").innerHTML = sum;
    })
  })
  

  I hope it's clear!

  The rest is great!

  10

  Marked as helpful
• Account deletedPosted over 2 years ago

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

  • 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 icons in this component serve no other purpose than to be decorative; They add no value. There Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  • Add a cursor: pointer to the “”rating buttons to improve usability of the buttons.

  • 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! 👻🎃

  10

  Marked as helpful