Design comparison
Solution retrospective
I am not sure how to make it so it's possible to highlight only one button at the time Should have it been done with radio buttons to begin with?
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the Main Element.
-
Change
width
tomax-width
in your component’s container to make it responsive. You will also want to delete theheight
as it is unnecessary. -
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@tyVespAPosted almost 2 years ago@vcarames Thank you for the tips! I have followed the first two and will try to recreate the compontent using radio buttons soon Happy coding to you too!
0 -
- @AdrianoEscarabotePosted about 2 years ago
Hi tyVespA, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
We can solve your problem with this code:
I made some changes to
evaluation.forEach
.evaluation.forEach((button) => { button.addEventListener("click", () => { evaluation.forEach(element => { element.classList.remove("container--rating--rating") element.classList.remove("active") }) button.classList.add("container--rating--rating") button.classList.add("active") }) })
The rest is great!
I hope it helps... 👍
0@tyVespAPosted about 2 years ago@AdrianoEscarabote ahh i understand! Thank you for looking at my code and for the help, have a great day!
1
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