Interactive Rating Component using HTML/SCSS/JS

Hi @Reallyvane 👋

You did a great job in completing this challenge. 👍 The component is faithful to the design. 👌 Below are a few things that I have noticed and you might want to check in order to improve your solution.

• When I look at this component, I would expect to see a <form> element with <input type="radio"/> elements for the different ratings and a submit <button> in the HTML markup. However, it is not the case in your solution. While the component seem to be working fine for the general users, those with assistive technology might struggle to interact with it. This is why I would suggest you to use HTML elements that are built to take user inputs when it is the case. For example <input type="radio"/> or <input type="checkbox"/> to choose from a list of options instead of <div> elements. This will also simplify things on the JavaScript side. 😉
• I also noticed that you have set a default rating value of 3 but at the moment, there is no visual cue that communicates that to the user. You should add the active class by default on the corresponding <div class="rating-btn"> element. Again, if it was a <input type="radio"/>, you would have used the checked attribute to achieve that. On the other hand, if you don't wish to set a default rating value, you would then have to add a check in the onSubmit() function like this:

let stars_score;

function onSubmit() {
  // Returning early if stars_score is not set
  if (!stars_score) {
    return;
  }
  
  card_content_1.classList.add("hide");
  score.textContent = stars_score;
  card_content_2.classList.remove("hide");
}

I hope this helps.

Keep it up.

Good job on the project, you kept it nice and simple! To enable people learn from you, perhaps you could include more comments to explain what each segment of code is doing. The project is responsive and is quite similar to the solution.

Hi Vanessa!

Just a detail, using JS I would recommend that you can prevent the page from reloading if the user clicks SUBMIT if he/she has not chosen any option.

For everything else I congratulate you is well done both design and responsive and the rest of the functionality.

Good luck!