Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component Vanilla HTML CSS JS

Lisa Allen 520

@CrypticMango

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Tell me what I could have done better or what you think I should change. Also... I am not very familiar with using setTimeout(). I have implemented it in my JS but I don't want it to constantly run, is there a way to only have the timeout run after the submit button is pressed? Or if there is a better way to have a preset timout. Thanks in advance for your help.

Community feedback

Marcin 270

@marcinsuski

Posted

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 520

@CrypticMango

Posted

@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 520

@CrypticMango

Posted

@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

@marcinsuski

Posted

@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 520

@CrypticMango

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord