Nice challenge, I learned a lot. First time I am working with API.
I noticed, on mozzila firefox. It generates advice only once and then it is not getting another. Other browsers works fine (even mobile firefox).
I have added a time countdown bar at the top of the container, since:
"Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice."
I also implemented the little flip animation on page load using AOS - Animate on scroll library. It's quite easy to use and looks nice.
Suggestions are welcome.
@vlad-solomon
Posted
You could add a second parameter to your fetch request like so:
fetch("https://api.adviceslip.com/advice", { cache: "no-store" })
This will stop the API from caching, and you would be able to make requests one after the other, bypassing those 2 seconds. If I were you, I would add this and get rid of the timeout animation, seeing as it's useless if you spam the generate advice button.
Marked as helpful
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
