Submitted about 2 years ago

advice-generator-app-main

Maca•630

@Maacaa0

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

Design comparison

SolutionDesign

Solution retrospective

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.

Community feedback

Vlad Solomon•270
@vlad-solomonPosted about 2 years ago
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
1

Please log in to post a comment

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