Hi Cedric!
Good effort on this challenge!
I have some suggestions that might help you out.
First off, to your question about the radio buttons not changing color upon clicking them:
You’re applying the checked property to the label rather than the input, which is why the styles aren’t being applied. To fix this, try applying the following in your styles.css file:
input[type='radio']:checked {
(put desired styles here);
}
Now the desired styles should be getting applied :)
Also, the labels aren't associated with their input fields. This is a problem because screen readers and such won't be able to associate the label with the corresponding input. You might want to try giving each input an id and giving the corresponding label a for attribute like so:
<label
className='card__radioinput'
for='button1'
>
<input
type='radio'
id='button1'
className='sr-only'
onClick={() => setUserChoice(1)}
/>
<span>1</span>
</label>
Consider giving each input the same name property (e.g. name='selectionButton') to make sure only one can be selected.
I also noticed that currently, it is possible to submit the form without having selected a rating. You could try avoiding this by slightly altering your handleClickSubmit function. Before setting isRated to true, check if userChoice is empty like so:
if(userChoice === '') {
alert("Please select a rating!")
return
}
Lastly, regarding responsive sizing, as the screen gets smaller, the contents overflow their container. I had the same issue and found the following helpful:
Instead of giving your .cardBS_div and .cardTK_div a width, height, min-width, and max-width, try only setting a width and min-width OR height and min-height and then setting an aspect ratio so the card will scale responsively.
Hope you find these ideas helpful!
Happy coding :)
