Interactive Rating Component using HTML/SCSS/JS

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  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.

  Marked as helpful

  1

  ---

  

  Vanessa•190

  @ReallyvanePosted over 2 years ago

  Hi!

  Thank you so much. This helps a lot and I appreciate the thorough explanation and example.

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  I'm happy to help and glad to see this was helpful to you. 🙂

  See you on the next one.

  Best regards.

  0
• 

  Stevecmd•100

  @StevecmdPosted over 2 years ago

  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.

  Marked as helpful

  0

  ---

  

  Vanessa•190

  @ReallyvanePosted over 2 years ago

  Hi!

  That’s a great idea! I’ll work on leaving more comments. Thank you so much for the feedback.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Vanessa•190

  @ReallyvanePosted over 2 years ago

  Hi!

  If you have time can you explain how I can add that feature. But, thank you so much for you feedback it’s truly appreciated.

  Thank you!

  1