Submitted about 2 years ago

Chall using Flex, Javascript and responsive

Zoulanders•380

@AlexDDevv

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

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,370
@darryncodesPosted about 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
1
Zoulanders•380
@AlexDDevvPosted about 2 years ago
Thank you for your response, I will do that ! Have a good day !
0

Please log in to post a comment

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