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

Major 50

@PandaMajor

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


When testing the mobile view, I noticed that the ratings would not change to the orange background (based on the javascript) and was wondering why that was the case and if there was a quick fix available. Does it have something to do with the !important tag I used in the stylesheet?

Community feedback

P

@mihalymarcell86

Posted

Hey @PandaMajor,

the issue is that on touch-screens the hover effect acts weird, since there's no mouse pointer. The hover state tends to "stick" to the element you tapped. The JS code works fine, if you select a rating and "tap away", you will see, that the background color did indeed change.

I found this article that provides some insight into the issue and offers some solutions.

Hope, that helps!

Marked as helpful

1

Major 50

@PandaMajor

Posted

@mihalymarcell86 huh, that's really interesting. Thanks for sharing!

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