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 using css and javascript

@RicardoTaipe

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

yishak abrham 2,150

@yishak621

Posted

Ricardo congrats for completing the challenge but my feedback will be 1)when the user clicks on the mobile version they cant see the active state of rating btns(orange color) ..it display the hover color if u notice...it happens because in mobile or tabs that cant display hover state so they take hover state as click...u cam fix it using @media query for pc @media (hover: hover) {   .btn-rating:hover {     background-color: var(--color-light-grey);     color: var(--color-white);   } }

And for mobile and tabs @media (hover: none) {   /*targets only medias that can not be hover for mobile devices or tabs <!--TODO:*/   .btn-rating:hover {     background-color: var(--color-Orange);     color: var(--color-white);   } } 2)the user shouldn't pass to the result card without clicking to the rating btns ...u display alert but for more interactive design recently instead display it as error message that will be cool Beside its great design keep coding

Marked as helpful

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