Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Frontend Mentor | Interactive Rating Component

Josh•100
@j-likes-spicy
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello everyone, and thank you for taking the time to visit my solution to the challenge. Although my solution was not entirely exact, I felt that this was a pretty comprehensive and rewarding challenge to take on. What I found most challenging was selecting a compound selector (which returns a NodeList), and adding and removing classes from the NodeList value. This is relatively straightforward when making changes on a single selector, however, I learned that in this type of scenario, the proper way is to loop through the NodeList and pass a value to extract the class to perform the change operation on. Also, since I decided to use flexbox on the card layouts, I could not get the margin exact on the completed card without breaking the layout; I decided to leave it as-is. This was a good learning experience to build and complete a project. Please let me know if there is anything I could have done differently or more efficiently; I'm always open to opportunities for improvement.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Josh'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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License