Frontend Mentor | Interactive rating component

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 2 months ago

  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 the background-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 its background-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.active 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

  1
• 

  Rupak Mukherjee•1,370

  @hannibal1631Posted 2 months ago

  Well first of all let me know where is it not letting you select one button at a time. CSS or JS?

  0

  ---

  

  hkaur108•310

  @hkaur108Posted 2 months ago

  @hannibal1631

  five buttons on the front page to select the rating, when I select one it should change the background to white and stay on it but that does not happen.

  0