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 with HTML, CSS and JS

Hyron 5,850

@hyrongennike

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


I know you can use stopPropagation() to stop events from bubbling but for some reason I was having trouble getting that to work.

Is there anyone that used event delegation to handle events for this or any JavaScript related project?

Any feedback would be much appreciated.

Community feedback

bunee 2,060

@buneeIsSlo

Posted

@hyrongennike, Your solution seems to be working great, where and why do you want to use stopPropagation()?

0

Hyron 5,850

@hyrongennike

Posted

@buneeIsSlo Hi no I'm happy with the solution I had a weird bug where clicking on the container would deselect the selected rating couldn't for the life of me figure out why so I just found a workaround but would like to know if I might be missing something.

1
bunee 2,060

@buneeIsSlo

Posted

@hyrongennike The workaround you've applied is what I had in mind. This problem arises because you're listening for click events on the container rather than the rating buttons themselves. Speaking of, using an anchor tag as a button doesn't work well in this scenario. I would replace them with actual <button> tags and add "click" event listeners on each one of them.

If I haven't made myself clear, please use this codepen by Elaine to research and learn.

Hope this helps :)

1

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