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

Would appreciate some feedback on this :)

@Aleroms

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


How did you guys handle selecting what element was focused and displaying it on screen?

Community feedback

Elaine 11,420

@elaineleung

Posted

Hey Santiago, great work on this challenge! About your question, for focus on the element, I just use a :focus pseudo class selector in my CSS to change the button outline in addition to changing the style of button colors using a class that I add/remove. This is mainly because the focus style is doing something specific, as in indicating which element currently has focus, and in a sense it has more of a purpose for enhancing accessibility.

Btw, the JS looks great, and the only thing I'd change is to use const variables for the queried selectors instead of let (I'd only use it for the focused variable). Like I mentioned in the other comment, see whether textContent works for you, and if it does, use that instead.

Here's a CodePen I put together as an example for this challenge, and you can see the two things working together: https://codepen.io/elaineleung/pen/GRxBNpE.

I also have a small collection of other variations here: https://codepen.io/collection/oErbpe

Marked as helpful

1

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