Frontend Mentor | Interactive rating component

Solution retrospective
I am struggling with selecting only one button at a time, it is letting me select multiple buttons and not deselecting the other. Please advise on this. Or any other feedback will also do. Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@huyphan2210
Hi, @hkaur108
I've reviewed your solution and noticed your questions. Here are some thoughts:
1. Using jQuery for DOM Manipulation:
To ensure only the selected button has the
.active
class, you need to remove the.active
class from all buttons with the.btn
class before applying it to the clicked button. Here’s an example:$('.btn').on('click', function(e) { // Remove unnecessary console.log if not debugging // console.log(e); // Remove the .active class from all .btn elements $('.btn').removeClass('active'); // Add the .active class to the clicked .btn $(this).addClass('active'); // Avoid inline styling. Define the background color in your CSS instead });
2. Avoid Inline Styles:
Inline styles like
$(this).css("background-color", "white");
are best avoided. Instead, define thebackground-color
in your CSS or SCSS for the.active
class. This keeps your styles separate from the script, making your code cleaner and easier to maintain.3. CSS Specificity Issue:
I noticed you’ve defined an
.active
class in your SCSS file, but itsbackground-color
is being overwritten. This is likely due to specificity. In CSS, the rule with higher specificity takes precedence.For example, if your
.btn
class is inside a.button-container
, your.active
class might not apply correctly because it’s not specific enough. Update your SCSS to:.button-container .btn.active { background-color: white; // Or your desired color }
Why?
.button-container .btn.activ
e is more specific than.active
.- It ensures the
background-color
for.active
is applied, even if other classes like.button-container .btn
have conflicting rules.
Hope this helps!
Marked as helpful - @hannibal1631
Well first of all let me know where is it not letting you select one button at a time. CSS or JS?
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