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

@git-Indrajit

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


What are you most proud of, and what would you do differently next time?

JS

What challenges did you encounter, and how did you overcome them?

Js

What specific areas of your project would you like help with?

Js

Community feedback

@filipjuszczak

Posted

Hi!

I would implement a function that removes the active class from all other buttons than the clicked one. It would improve user experience, as now it's unsure which button was clicked last.

For buttons, I would add a custom data-value attribute and assign a corresponding value to it, like this:

<button id="5-rating" class="rating-btn" type="button" data-value="5">5</button>

You could access that information like this:

function ratingBtnClicked(e){
    if(e.target.classList.contains("rating-btn")){
        e.target.classList.toggle("active");
    }
    defaultScore = e.target.dataset.value;
}

Marked as helpful

1

@git-Indrajit

Posted

Thank you for the suggestion

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