Interactive rating component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Shane, well done here on your second challenge! I like what you did with your JS, and I learned one or two things from it that I might try in my solution. I also like the fact that you used radio buttons, which I think is really the best choice for this task.

  I only got three comments here:

  1. Since you're using radio buttons, you can consider the accessibility factor as well. Right now, you have them as display: none, which means the screen reader will not be able to detect those buttons, and therefore a screen reader user would not be able to select a score with the tab key. For ideas on how to hide them without hindering their functionality, you can check out my solution here: https://www.frontendmentor.io/solutions/responsive-interactive-rating-component-SeBo-aR4gB

  2. In your JS, you can try using a template literal for the selectedRating.textContent instead of string concatenation:

     selectedRating.textContent = `You selected ${checkedInput.getAttribute("value")} out of 5`;
     

  3. Instead of needing to put the .hide class on two elements, you can try putting the class on their parent element (can be the body selector also), and then have the CSS like this:

     .container{
        display: block; // you might not even need this
     }
     .hide .container {
        display: none;
     }
     .thankYou {
        display: none;
     }
     .hide .thankYou {
        display: block;
     }
     

  Also, I might rename container as rating-container and thankYou as thankyou-container, just so it's clear that these two are siblings!

  By the way, you have some issues in your report; you just need to add the main tag to your code, and that should take care of most of the issues.

  That's all, and hope to see more! 🙂

  Marked as helpful

  1

  ---

  

  Shane Chaffe•900

  @ChaffexdPosted about 2 years ago

  @elaineleung hey Elaine, thank you for such thoughtful feedback. I look forward to improving my project when I wake up thanks to your feedback. This really helped me consider more aspects to my design when coding.

  1