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 using Css ,Javascript and jQuery

Vishal 260

@vishal-singh5128

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


Please provide any suggestions for further learning. I found difficulties when implementing localStorage, maybe there is a suggestion. Let me know if there are any errors, even better if provide a solution. Thank You

Community feedback

@CosteaAlin93

Posted

Hi Vishal, There could be a better way to do this. First of all, let's define some cases:

  • clicking submit while no rating is selected >> this case should show an error message or some hint to the user to click a rating before submitting. To do this, above the submit button, create a paragraph element which will contain something like 'Please select a rating!' , and style it to be hidden (display: none;) and only show it when the button is clicked without a rating being selected

  • selecting a rating and pressing submit >> this should not point to to index2.html. Rather, use the same trick as above. Consider your content on index.html as the 'rating view' and the content on index2.html as the 'thank you' view. Combine the HTML from the both files in a single one. Now, if you have a rating selected, clicking submit should hide your 'ratingBox' element and in his place, you should display the 'thankYouState ratingBox' element.

  • and one more thing: clicking submit on your solution will give a rating by default. If you fix the first case above, this situation will disappear.

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