Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component HTML | SASS| SCSS | JS

@a-almeida10

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm still a beginner in JavaScript, so although the code works, I would like some feedback on how to improve it.

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Ághata, great work on the JS here, and the component works well 🙂

I think what you did here in the JS is fine; the code is clear, the variables and functions are clearly named, and things just look clean in general. The only I thing I would do differently here is that, instead of having the onclick in the HTML, I would use an addEventListener as I generally prefer this when working with vanilla JS. I think this is better for the separation of concerns and the ability to see everything easily where all the interaction is in the JS script instead of having some in the HTML as attributes. There's really nothing wrong with using onclick in the HTML though, just a matter of general practice plus personal preference. For further reading, you can check out this article in medium: https://medium.com/@annapeterson89/addeventlistener-vs-onclick-which-one-should-you-draft-into-your-fantasy-football-team-16ea9ae71ee0

About the CSS, I think you can give the component a bit more padding, as things look a bit squished and can use some additional spacing. Other than that, everything's looking good!

Marked as helpful

3

@a-almeida10

Posted

@elaineleung Hello, Elaine :D Thank you for looking into my code and giving me your feedback, I really appreciate it. I'm going to read the article you suggested and learn more about addeventListener.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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