Design comparison
Solution retrospective
On the mobile version, it seems to not detect the click event. As you can see the background color remains grey and does not get the css class that gives it the orange background color on click, just like it does on desktop. Any feedback on that?
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Smaragda, how are you?
to solve your problem, we can do this:
Let's add the code in the same scope as the
selectedRating
function, so it will look like this:ratings.forEach((element) => { element.addEventListener("click", (e) => { ratings.forEach(element => { element.classList.remove("card-rating__clicked") }) e.target.classList.add('card-rating__clicked'); }) })
we need to put it in the same scope because of the
ratings
variable, what is happening there it is making a loop when we click on the button and it is removing the classes that are active, but how to make this loop we are clicking on the button the last thing that it does before exiting the event code block is to add the'card-rating__clicked'
class!I hope it's clear!
0 - @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
Regarding your question,
The color is the other way around. When you
:hover
over the buttons, it should be orange. Once a button has been selected it should be a grey color.- The proper way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 👻🎃
0@smara-gdaPosted about 2 years ago@vcarames thank you so much for your feedback! I'll work on it.
0
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