Interactive Rating Component Vanilla HTML CSS JS
Design comparison
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
- @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 helpful0@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@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@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@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
Please log in to post a comment
Log in with GitHubJoin 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