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

Advice Generator Using Astro And Tailwind

Vincent 190

@Vincent-Bouton

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


Hello There!

Tech

  • Astro
  • TailwindCSS

Struggle

For some reason the API didn´t want to get a new random advice everytime I clicked the button. So I used a math.random on the know number of advices. If someone has the solution for this I would like to know how it should be done.

Thanks for Reading

Happy Coding

Community feedback

keyule 100

@keyule

Posted

I have no idea how astro works, but its cached. You can just tell it to not cache it in your request. In JS it would be like this:

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

0
P
alexander 1,300

@alex931d

Posted

regarding your issue: when you fetch the /advice you will be given a random advice in a json format https://api.adviceslip.com/advice hope it helps note there is a 2 secounds delay between each fetch call so maybe you could display some logic saying waiting or a spining icon

0

Vincent 190

@Vincent-Bouton

Posted

@alex931d I had a fetch on the button, and even after waiting minutes it will still return the same advice. Maybe Astro is running code once and keep in cache the result of the fetch and display always the same to win some load time. So I hard coded to get a new fetch.

Thanks for you comment :D

0
P
alexander 1,300

@alex931d

Posted

@Vincent-Bouton Hello, I just reviewed your code, and it looks pretty correct to me. I'm sorry if it seems weird because when I open '/advice,' I get a random piece of advice. Maybe you could add a .then((response) => {...}) to the fetch request and include error handling to see any potential errors?

1

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