Submitted over 2 years ago

Chall using Flex, Javascript and responsive

@AlexDDevv

A solution to the Interactive rating component challenge

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?

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

darryncodes•6,350
@darryncodes
Posted over 2 years ago
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:
- MDN - <input type="radio">
- MDN - :focus
- you should look into using <form>, <fieldset>, <label> and <input>'s too
- when using the <form> you'll need to consider the submit event instead of onClick
I hope that helps, any questions let me know.

Happy coding!
Marked as helpful

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