Design comparison
Solution retrospective
I had problems with the state of the rating buttons. They only work correctly when I hold down the button, but when I select it, its style doesn't change. Is this ok?
Community feedback
- @tonchi5Posted about 1 year ago
Hey, you could add pseudoclass :focus in your css to the rating buttons(rating-buttons:focus{color: gray}) to keep the color gray on the selected button, it keeps the gray color until you click somewhere else. You can center the container on the page with
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Hope this helps :)Marked as helpful0 - @AmjadAlshboulPosted about 1 year ago
To keep the color of the rating button you selected as medium gray even after you move your mouse away:
instead of using the ' :active ' pseudo-class, give each button an 'onclick' attribute in the html and then use javascript in this attribute to add a class to the button that makes it medium gray.
for example:
<div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick=" star1 = document.querySelector(#star1); star1.classList.add(star1-class); "> 1 </div>
and then somewhere in your css:
#star1-class{ background-color: var(--medium-grey); }
To make it so that only one of the rating buttons can be selected at a time, run a function straight away on each 'onclick attribute' which removes the any added class from each button, using someVariable.classList.remove(enter you class that you want to remove here) ;
so the code would look more like this:
<div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick=" resetButtons(); star1 = document.querySelector(#star1); star1.classList.add(star1-class); "> 1 </div>
I will leave you to figure out the code for the resetButton() function yourself. If you get stuck, you can look at my code. Good luck.
Please rate this comment if you found it helpful.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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