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

Responsive Advice Generator App Built With Reactjs

#parcel#react#styled-components#node
serfoll 120

@serfoll

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


All inputs are welcomed!

Community feedback

Aadvik 1,250

@Aadv1k

Posted

hey man great design, just one small suggestion, (this is something even I do and am trying to avoid) that is hover, I would say you should add a :active animation to your button to make it clicky both on mobile and deskop. The problem with a hover is that it is sticky on mobile, which makes it irritating, in my newer projects I avoid using hover in most cases, especially where the effect is visible (box-shadow for instance) instead I try and add active animations that trigger when the button is clicked.

Marked as helpful

1

serfoll 120

@serfoll

Posted

@Aadv1k hi, man thanks for the great input. Yes I did notice that and it was annoying was wondering how to fix that. I might have gotten an idea now, and I actually thought the :active was the culprit since I did use both it and hover. Will have to play around with it a bit more, maybe disable hover using media query break points?

Have a good one, 🍻

1
Aadvik 1,250

@Aadv1k

Posted

@serfoll yup! that is actually a good option using @media (hover: hover) will only trigger your hovers on devices that support real hover, I just avoid using too many (or too intruisive) hovers altogether, althought this is a good option; also, active is only triggered when your finger (or cursor) is on the actual button.

Marked as helpful

1
serfoll 120

@serfoll

Posted

@Aadv1k then it's definitely hover bugging out. I have now fixed it and published the changes. Could you check for me if the issue still remains?

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