Design comparison
Solution retrospective
Hi Guys. Well... this is my first JS challenge. It was very difficult for me. It works as it should, but i feel like the code is a mess. I had a problem when I selected rating-button 1 and clicked somewhere else (rating button was no longer selected) and hit submit, I still had selected rating 1. That is why I added the color changes to each rating button.
I think that this solution is not even close to a good one.
I would really really appreciate your feedback.
Community feedback
- @GabborionePosted over 2 years ago
Well done! Your design is really close to the original end you code isn't a mess like you think, it was really easy to read. One thing you can improve is the management of the numbers, it's not a really good thing to repeat the code for every button since they are the same component. You can try to give them the same class name end get all with the QuerySelectorAll and then use a foreach to add an event listener to each one of them. Now you can create a single function with a parameter that can store the target of the "click" and you can take the number of the button with target.textContent. For the change of the color on click you can create a css class .active and assign that to the target button with target.classList.add("active"). Hope this can help you, good coding :)
Marked as helpful1@Maacaa0Posted over 2 years ago@Gabborione Hi Gabriele, Iam sorry for late response. I will try these things you suggested. Thank you for taking your time to look into my code. Take care
1
Please log in to post a comment
Log in with GitHub
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