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 - Solution

Eniโ€ข 180

@EnidaShehu

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


Feel free to leave me feedback on my solution to this challenge :)

Community feedback

visualdennisโ€ข 8,255

@visualdenniss

Posted

nice work Enida!

  • Couple issues to improve on: It currently allows to submit even if no rating is selected, resulting in "you have selected undefined out of 5" in the thank you section.

  • Highlighting the selected rating definitely would improve UX, on click, the class of selected rating could be changed and have orange color until other rating is selected.

  • The star at the top left should not be a clickable element, this is caused by adding event listener to all elements with number class: "$(".number").click(function () { userChosenNumber = $(this).attr("id"); });" It is just a deco element so i dont think it needs number class like buttons.

Hope thats helpful, keep up the good work!

Marked as helpful

1

Eniโ€ข 180

@EnidaShehu

Posted

@visualdenniss Thank you for your feedback Denis :)

I went ahead and made a few changes to the code to improve my solution.

0
visualdennisโ€ข 8,255

@visualdenniss

Posted

@EnidaShehu checked now the updated version,

great job Enida! You've solved all the issues i've pointed out.

As a small note, i'd suggest avoiding using alert() at all, it stops the code execution which can cause issues sometimes, but above all, its definitely not a good user experience. Displaying simple error message or a modal pop-up is much better in terms of UX. Ansonsten sieht alles top aus ๐Ÿ˜œ

Marked as helpful

0
Eniโ€ข 180

@EnidaShehu

Posted

@visualdenniss Vielen Dank Denis :)

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