Interactive Rating Component with JavaScript

Community feedback

• 

  Gugg•130

  @Gugg94Posted over 2 years ago

  Hey,

  1. I'd suggest using similar naming in HTML and JS, now you're mixing i.e. "numbers" and "ratings" for the same element, that's a bit confusing. I'd also be consistent in formatting and/or installing a code formatting plugin

  2. You've added the event listener for selecting a rating on the "ratings" container, which seems to add it to the container itself AND the items inside, resulting in being able to select the container if you click between the numbers, this is not what you want. Don't forget you also have "querySelectorAll" to select multiple elements, you should use this so you can select all the ratings items: => "const ratings = document.querySelectorAll('.number');" You can remove the selector for the container "numbers", you don't need that.

  3. Once you have all the separate numbers, you can add an event listener to all of them using a for-loop or forEach, you can look that up to figure it out.

  4. If you want to return a previously selected element back to it's original state you have to ask yourself "when will I reset the selected state?", the answer will be "when I select a number" => in your event listener, BEFORE you select a new rating, use a for-loop or forEach to go over all the numbers and remove the selected state, once they're removed everywhere you can safely add the selected state to the correct element

  0

  ---

  

  Gugg•130

  @Gugg94Posted over 2 years ago

  If you want you can have a look at my solution but I'd highly suggest to try it yourself first.

  I've also gone the long route in making new CSS classes to hide/show the cards where I maybe should've gone with your approach and edited the display directly in JS.

  0

  

  Dummy_ken•180

  @DummyKenPosted over 2 years ago

  @Gugg94 Alright! I will try it myself. Thanks, that was quite helpful.

  1