Interactive Rating Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Assalamu Alaikum 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • "Can someone help me to add orange color to the number when clicked!!", The code you written is correct but the issue is happened because of specificity in css

  ---

  • Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration, which means if you nest the selector with it's parent selector then the it can override it's latest declaration.

  ---

  • For example:

  .num-btn button {
  styles
  }
  
  .selected {
  styles
  }
  

  ---

  • The first declaration has more specificity than the second declaration, so that the style rules declared by second selector is ignored by the first selector's higher specificity.

  ---

  Solution 1:

  button {
  styles
  }
  
  .selected {
  styles
  }
  

  • Now everything will work fine.

  ---

  Solution 2

  • A as a developer we recommend you to go with BEM Naming Convention for css.

  ---

  • BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.

  ---

  • BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.

  ---

  • This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Azam Mustufa•360

  @azammustafa66Posted over 1 year ago

  @0xAbdulKhalid Jazzakumullahu khairan

  0
• 

  samueljustus•140

  @samueljustusPosted over 1 year ago

  The orange color is the hover on the button so when it's clicked it changes to the other ash color

  0
• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  The code you wrote is just fine, you mistyped the color on class 'selected'. Check it again.

  0