interactive-rating-component-main

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Amaar, great job here, and interesting choice with the box shadow hover (looks a bit like an eclipse)!

  I think using setTimeout is fine, but from a user experience perspective and also in a real-life situation, it's probably not necessary to return to the previous screen for this case. Rating components are usually meant for a one-time use because if the user is allowed to make more than one rating, that would affect the score and it doesn't give an accurate picture for data collection. The exception here I think is unless the user is not anonymous, as in, they have their name recorded so that the data collection team can easily see duplicated entries by the same person. Hope this helps!

  00

  Marked as helpful
• 

  Eray•1,410

  @ErayBarslan

  Posted almost 3 years ago

  Hey there, excellent work on this one! Regarding your question, another option would be adding a return button. You can use setTimeout here but it displays only for 1,5 seconds which isn't enough for the user to read the page. It's better to use a higher value. Additional suggestions:

  • Right now user can submit without selecting a rate and it returns undefined value. To prevent this you can add an if state to your submit event listener function like:

  submit.addEventListener("click", () => {
    if (a) {
    /* your entire function */
  }
  })
  

  • On screens smaller than 400px, content overflows out of body. That is due to using fixed width value. Instead you can use max-width: 385px; to make your container responsive. By default it's width: auto which is taking the available space without overflowing. Giving fixed width overrides this. Aside these nothing much I'd add and happy coding :)

  00

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello Amaar, congrats on finishing the challenge!

  To answer your question, I think that adding a setTimeout is the best way to get the desired effect that you want, I would give more time to the user to read the thanks you card tho.

  A little problem in your project is that the rating can be submitted even when there is no rate selected and it returns undefined!, you could use an if guard close to return if no rating was selected.

  Also checked in your code that you were selecting the buttons one by one, instead of that you could use a forEach or for loop on all your buttons and select all of them at the same time, other tricky way could be selecting the parent element and from that get the closest button, something like this:

  const ratingContainer = document.querySelector('.rate'); // here you select the container of ratings
  ratingContainer.addEventListener('click', function (e) {
      const clicked = e.target.closest('button'); // selecting the closest button
      if (!clicked) return; // if clicking outside the button returns
  
  

  Hope my feedback helps you! if you have any questions, don't hesitate to ask, great job!

  00

  Marked as helpful