Interactive rating component with HTML, CSS and basic Javascript

Community feedback

• 

  John Mirage•1,590

  @john-miragePosted over 1 year ago

  Hello,

  For the submit button, you added letter spacing by adding one space character between the letters, don't forget the nice css property: letter-spacing which add some space between the letters for you.

  Marked as helpful

  1

  ---

  

  Soham•100

  @sommmmorePosted over 1 year ago

  @john-mirage I was completely unaware of that property. Thanks for letting me know!

  0
• 

  Leonardo Romero•150

  @LeonardoR3DPosted over 1 year ago

  Hi, first of all congratulations on completing the challenge :D.

  And now my javascript suggestions would be:

  1° Create variables to avoid repeating selections, for example:

  const allRatingBtns = document.querySelectorAll(".rating-btn");

  this way if at some point you change the name of the class in your objects you will only have to change the name in your variable instead of having to do it in all your code.

  2° When you create variables do not use "var", although it still works it is something that is already obsolete because it causes problems with the new methods, now you use "let" and "const", you use "let" when you want your variable to be able to change value at some point, like this

  let rating = 0;

  rating = 5;

  and you use "const" when you do not want this to be possible, for example if you do this you will get an error,

  const rating = 0;

  rating = 5;

  this is convenient when you use variables that you do not want them to change.

  3° And finally I suggest that every time you make a loop with some array you use the new forEach method, it is easier to read, shorter and you don't need to specify the number of cycles since it will repeat the action for each component of the array, the following would be a good example:

  
  const allRatingBtns = document.querySelectorAll(".rating-btn");
  
  allRatingBtns.forEach((btn) => {
  btn.addEventListener("click", selectedButtonColor);
  });
  
  

  Marked as helpful

  1

  ---

  

  Soham•100

  @sommmmorePosted over 1 year ago

  @LeonardoR3D Hey Mr. Romero, thank you for your helpful advice! I'll surely try to implement it the next time around. :)

  1