interactive rating component | vanilla & mobile first

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

Regarding your questions,

In order to answer them, you first need to fix 🛠️ your HTML;

• To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️ (with a legend) and inside of it, there should be five input radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

More Info: 📚

MDN: <input type="radio">

MDN: Field Set Element

• As for your JS, the eventListener should be on the form ⚠️ as a submit.

• To get the ‘rating’ ⚠️ you would use const rating = form. querySelector (" input [type= 'radio']: checked")

• All the JS should do is display the ‘thank you" content and hide the previous content by removing/adding the hidden attribute/class.

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

Happy Coding! 🎆🎊🪅

Hello Alia Quintero, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

I noticed that the content is going to the side, to solve this we can do the following:

body {
    margin: 0 auto;
}

To make the code look cleaner, we can use the forEach method:

ratingScore.forEach(element => {
  element.addEventListener("click", () => {
    ratingScore.forEach(element => element.classList.remove("selected"))
    element.classList.add("selected")
    selectedScore.innerHTML = `You selected ${element.innerText} out of 5`;
  })
}) 

The remainder is excellent.

I hope it's useful. 👍