interactive rating component

Community feedback

• 

  jfpccaballero•450

  @jfpccaballeroPosted over 2 years ago

  You should try to use a for loop, or forEach for the ratings so you avoid repeating so much code

  const numbers = document.querySelectorAll(".here add a class that all the numbers have ");

  numbers.forEach(number => { number.onclick = ( ) => {

        console.log(number.id);
     }
  

  });

  // this replaces addEventListener and here you should write what do you want to happen when selecting a rate. //
  // play with the console to see how it works, for example add an id for each number and retrieve with console.log //

  Also try to keep all the style in your css sheet and just writing to add or remove classes on js

  Marked as helpful

  1

  ---

  

  Emorinken Samuel Olayinka•290

  @Sam10-debugPosted over 2 years ago

  @jfpccaballero thanks man

  0

  

  Emorinken Samuel Olayinka•290

  @Sam10-debugPosted over 2 years ago

  @jfpccaballero thanks man

  0
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  hi, These are my obeservation about your solution:

  1. Submit button need some more padding in y direction.
  2. set <code>cursor:pointer</code> on rating-numbers.
  3. After selecting a number, user should know what he/she has selected. Try giving differnt style to it.
  4. You did not consider the scenario when user clicked on "Submit" even before selectiong any rating.

  Here is my solution: https://rating-rem.herokuapp.com/

  Feel free to send me your feedback.

  Good Luck, #happyCoding

  Marked as helpful

  0

  ---

  

  Emorinken Samuel Olayinka•290

  @Sam10-debugPosted over 2 years ago

  @besttlookk thanks man

  0

  

  Emorinken Samuel Olayinka•290

  @Sam10-debugPosted over 2 years ago

  @besttlookk i've applied the changes to all except number 4 . I'm battling with the functionality of the scenario when user clicked on "Submit" even before selectiong any rating.

  0