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

Roll the dice to generate the advice

#animation#fetch#grunt#sass/scss

@miranlegin

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


Hi all,

some ideas to animate content height between advice's would be excellent.

Cheers, Miran

Community feedback

Elaine 11,420

@elaineleung

Posted

Hi Miran, if you're looking to add some animation in the transition duration where the advice changes, maybe you can have a look at my solution, as I used a loader and also I had some transition with the height change I believe: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9. By the way, I like the rolling animation for the dice!

Right now I'm viewing this on Firefox and it doesn't load the second advice due to caching. If you have Firefox, you can test it out as well. To fix that, add a request header object in fetch, like this:

fetch(url, { cache: 'no-cache' })

Hope some of this can help you out!

Marked as helpful

0

@miranlegin

Posted

@elaineleung Hi Elaine, thanks for the feedback. I've seen your example and this is kinda similar to what i wan't to achive so i will take a closer look at that.

I wasn't aware of the issues with Firefox so this is quite a helpfull comment and i will update my solution accordingly.

Keep coding! Miran

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