Interactive Rating Component Vanilla HTML CSS JS

Community feedback

• 

  Marcin•270

  @marcinsuskiPosted about 2 years ago

  Your code is neat and pleasant to read, I'm still learning that particular skill ;)

  As for JS, You wrote loads of code to target each rate individually. I think I did it more efficient by targeting whole class of buttons (parent div) and using 'forEach' function. It took me 1 line of code this way:

  const rates = document.querySelectorAll('.btn');

  rates.forEach((rate) => { rate.addEventListener('click', () => { result.innerHTML = rate.innerHTML }) })

  setTimeout() looks good - did You make any updates on it?

  Marked as helpful

  0

  ---

  

  Lisa Allen•530

  @CrypticMangoPosted about 2 years ago

  @marcinsuski Thank you! I love keeping it organized and then I don't get lost in my own code. Ohh! I appreciate the tips on the rate buttons I will update that in the morning. And no I did not update the setTimeout() function, I was just wondering if there was a better way to do it. Thanks for taking the time to look over my code for me :D

  0

  

  Lisa Allen•530

  @CrypticMangoPosted about 2 years ago

  @marcinsuski Hello! I am trying to get forEach() to work but I seem to be missing something. I keep getting the error "Uncaught ReferenceError: result is not defined" I have tried a few different things but I keep getting errors. I just reverted it back to how it was when i first put it in.

  0

  

  Marcin•270

  @marcinsuskiPosted about 2 years ago

  @CrypticMango

  The error says that you didn't define the 'result' function. I assume you simply copy-pasted my "result" and You should've substituted this for your const "ratingNumber".

  This should target the place that you want to inject the chosen rating.

  Below version should work well with your code:

  rates.forEach((rate) => { rate.addEventListener('click', () => { ratingNumber.innerHTML = rate.innerHTML }) })

  0

  

  Lisa Allen•530

  @CrypticMangoPosted about 2 years ago

  @marcinsuski Oh okay. I had tried that before reverting back to what i began with but I had it backwards. Thanks again for your help!

  0