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

vintech05β€’ 370

@vintech05

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 feedback would be greatly appreciated regarding the most efficient use cases with javascript for this particular project. I definitely did violate the DRY(don't repeat yourself) rules here.

Community feedback

Cesar D.β€’ 400

@ThatDevDiaz

Posted

Hey!

I noticed you labeled each individual number and applied a function to each different selection

One thing I would do to help with the dry principle is to just create a single function which will receive the user's input as a value and return this value so you can then call this function in a template literal and the result will be dynamic instead of statically creating the individual outcome for each different click. In this case, the user's input will only be recorded once the submit button is pressed. No need to record whats pressed every time because it really only matters once they hit submit.

The end result will be something like - ratingResult.textContent = "You've selected ${selectedButton()} out of 5!"

and of course, selectedButton will be whatever value the function returned. This way you only have to make the event listener for the "submit" button and not an event listener for every individual rating.

Marked as helpful

1

vintech05β€’ 370

@vintech05

Posted

@ThatDevDiaz nice one man, thanks for dropping by!

0
Tushar Biswasβ€’ 4,080

@itush

Posted

Congratulations on completing the challenge! πŸŽ‰

Your solution looks nice to me :)

-Feel free to go through my solution to get some ideas about the JavaScript of the project.

I hope this helps🀞

Happy hacking! πŸš€πŸ’»

0

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