Skip to content
Submitted almost 3 years ago

Advice generator app

accessibility, bem, lighthouse, semantic-ui
Jax Teller•670
@piushbhandari
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

how would you animate the advice text every time you fetch it? for example i wanted the advice to slide in from the left each time the button is clicked, but i can't seem to do it.

Code

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,360
    @elaineleung

    OH by the way! I just checked out your app, it looks like it has an issue that's fairly common when viewed on Firefox where the second advice won't load right way due to caching, and this is something I've seen on many of these solutions. You can test it out on Firefox and see as well. The way to fix this is to add a header object in fetch, like this:

    fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' })

    Marked as helpful
  • Elaine•11,360
    @elaineleung

    Hi Jax, I also used a transition animation for my app, and I did a quick update just now to add a similar translation effect so that you can see it in action. I see you using an "active" class here, which I think works fine for the task, so you just need the CSS for it. What I did was, I used an aria-hidden to toggle between the hidden and display states instead of using an "active" class, but I think you can still check out the JS and CSS as a reference. Good luck!

    My solution is here: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9

    Marked as helpful

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