Interactive Rating Component

Solution retrospective
What are you most proud of?
-
Successfully implemented an interactive rating component that dynamically updates the UI based on user input.
-
Improved code structure by organizing JavaScript event listeners efficiently.
What would you do differently next time?
-
Improve state management by using localStorage so that the rating persists even if the page refreshes.
-
Add a "rate again" button in the thank-you state so users can submit another rating without refreshing.
Challenge: Initially, clicking a rating button didn’t properly update the selected state, as multiple buttons could remain highlighted.
Solution: Used forEach to remove the active class from all buttons before adding it to the selected one:
ratingBtn.forEach((btn) => btn.classList.remove("active"));
button.classList.add("active");
This ensured only one rating could be selected at a time.
What specific areas of your project would you like help with?-
Are there any redundant lines of code in my JavaScript that could be optimized?
-
Does my CSS structure follow best practices? Could I improve it for better readability or maintainability?
-
Is there a better way to handle rating selection without using forEach to remove the active class from all buttons?
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Muhamad Rukhul Kirom's solution.
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