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

My third project with JS, soo any advices is welocome!

Radek 230

@RadeQu

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


Any tips with JS is welcome!

Community feedback

@GrzywN

Posted

Great job on the challenge!

I would recommend you to try improving your JavaScript by making it more readable and maintainable. Always remember to try not to repeat yourself (DRY rule). You can do it, by iterating object or array with all elements you want to target using some kind of loop (for, for of, for in, forEach) and adding eventListeners in its body. Finding good solution can be difficult at first, but over time you will get the hang of it. If you want you can see my solution to see how you can handle similar problems in the future. Remember that no one is perfect and everyone had tough beginnings.

Hope this helps! Keep it up and have a nice day and happy coding! :)

Marked as helpful

2
CyrusKabir 1,885

@CyrusKabir

Posted

Hello my dear friend ♥ you did good on this challenge and here some tips (not just java script) :

  • for having rating buttons in circle shape you can have equal width and height with 50% of border-radius
  • change your spacing values like padding and margin to have more closer result to main design
  • add more line-height to your body
  • You did JS part in a very hard and messy way, there is more clean and better ways to add interactivity to your component (one the worst things can happen to your code is having function with a lot of arguments and arguments with bad names !) so my tip for js : delete or comment all of that js code and think for a better logic or way to add interactivity to your component it's ok if you do not come up with a solution, trying to solve a problem with different solutions is great in itself.

Marked as helpful

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