Skip to content
Submitted about 2 years ago

Interactive Rating Component with HTML, CSS and JS

Hyron•5,870
@hyrongennike
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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,020
    @buneeIsSloPosted about 2 years ago

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

    0
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    @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,020
    @buneeIsSloPosted about 2 years ago

    @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

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