HTML, CSS and JavaScript

Solution retrospective
- Feedback welcome
What did you find difficult while building the project?
- I wasn't able to add the background colour when the input is :checked. I tried using CSS but it didn't work. I am guessing is because I wrapped the input type in a label tag so when the user clicks the number it also checks the input.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mahen2-cmd
Great Job Ali!
I just solved the challenge with the background color changing when the input is :checked. You might want to look at my solution.
https://www.frontendmentor.io/solutions/interactive-rating-component-solution-using-html-css-and-javascript-iGOlR8A7xn
Here is what I did:
{ button.addEventListener("click", function() { if (selectedButton) { selectedButton.classList.remove("highlight"); } button.classList.add("highlight"); selectedButton = button; }); });
and added css
.highlight {
background-color: hsl(25, 97%, 53%); color: white;
}
Now, whenever a button is clicked the .highlight css is activated and it would change the color of the button.
- P@amyspencerproject
Good Job Ali!
I remember having some of the same issues with the :checked. In the end I took my
<input>
out of the<label>
div for accessibility reasons. And then just used adjacent sibling combinators to get my :hover and :checked. Like thisinput:checked + label { background-color: var(--light-grey); }
Did you try combining the label and input?
label input:checked { background-color: red; }
or maybe
label > input:checked { background-color: red; }
The Stephanie Eccles article I used as a resource has a solution that also might work for you. And she has the <input> nested into the <label>. Step #4 https://moderncss.dev/pure-css-custom-styled-radio-buttons/
Hope this helps you. Amy
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