Interactive Rating Component [JS & SASS]

Community feedback

• 

  Indira•120

  @indy-stackPosted about 1 year ago

  Hello Ricardo, I've been looking at your solution since the use of SCSS got my attention because I want to learn it.

  Something that caught my attention was the JS for this project. I'm not sure if you wanted to purposely hard code the solution,

  for instance you have something like this in your code:

  const circle_1 = document.querySelector('.circle1');
  const circle_2 = document.querySelector('.circle2');
  const circle_3 = document.querySelector('.circle3');
  const circle_4 = document.querySelector('.circle4');
  const circle_5 = document.querySelector('.circle5');
  
  ...
  
  //events
  circle_1.addEventListener('click',function(){
      ratePicker(1);
      
  });
  
  circle_2.addEventListener('click',function(){
      ratePicker(2);
      
  });
  
  circle_3.addEventListener('click',function(){
      ratePicker(3);
      
  });
  
  circle_4.addEventListener('click',function(){
      ratePicker(4);
      
  });
  
  circle_5.addEventListener('click',function(){
      ratePicker(5);
  

  It seems like you are manually adding an event listener to each circle. I feel like your code can be improved if you use a forEach() loop to add an event listener, and instead of using a variable for each circle you can use the "circle" class and select all circles with a querySelectorAll(). This is what I mean :

  const circleEls = document.querySelectorAll(".circle");
  ...
  //add a click event listener to all circles
  circleEls.forEach( function(circle) {
      circle.addEventListener("click", function()  {
           //code here
      });
  });
  

  Let me know if you have any questions or comments with my suggestions, and hope this helps :)

  Marked as helpful

  0

  ---

  

  Ricardo Collado Rothschild•90

  @RicardoColladoRothschildPosted about 1 year ago

  @indy-stack It looks more professional, your proposal. I like it, i want to try it out. But help me with this part, i'm wondering how will i be able to determine which "circle" was actually press. My logic, is to use every addEventListener, to determine which one was press, and then store in a variable that number, so can handle it. But if use your solution, how should i determine which number was press, and then store the number into a variable. As you can see, i have two JS files, one is a class with the methods that actually perform the changes, that the SelectionClass. I like the way you propose, but i dont see, how i can keep my "logic". My repository is on github, feel free to forked it, and submit a pull request, i will test it and see it. thank you a lot for your feedback.

  0

  

  Ricardo Collado Rothschild•90

  @RicardoColladoRothschildPosted about 1 year ago

  @indy-stack Thank you very much!!! appreciate the feedback, i just figure it out. By selection each element by the value it hold or the inner information on the div. It is an amazing solution that way, my works, but the less code i can implement, it will be a lot better. Thanks for your feedback i learned something new with it!

  1

  

  Indira•120

  @indy-stackPosted about 1 year ago

  @RicardoColladoRothschild Yes, you got it. I'm glad you figured it out and learned something new, I'm always happy to help.

  1