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

Chall using Flex, Javascript and responsive

Zoulanders 350

@AlexDDevv

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


Hello ! I'm learning Javascript and this is my first challenge with ! How can I keep an :active effect in Javascript? On the list, before to click on the button, I wanted to keep the background and color of numbers, but I didn't succeed. I wrote "Let list = document.queryselector("li") (or put an id and use GetElementById) and created a function. I used "onclick" but only the first li took changes, even if all li had "onclick" or an id. Someone can explain me that?

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Zoulander,

I think your question would be better resolved using semantic html and css instead of JavaScript.

  • instead of a using a list consider <input type="radio"> this has many more built in accessibility benefits and makes styling the input with :focus easier achieving the 'active' state
  • you can also tab into the input and use your arrow keys to see the focus state
  • styling radio inputs are a little trickier but something really worthwhile

Extended content:

I hope that helps, any questions let me know.

Happy coding!

Marked as helpful

1

Zoulanders 350

@AlexDDevv

Posted

Thank you for your response, I will do that ! Have a good day !

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