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 by Javascript

Joel 590

@JoelLH

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


Hey everyone, this is my solution for the advice generator. I'm not sure about my JavaScript code, the quote takes a long time to load and the btn doesnt work right away, not sure if thats something related to the api. If u have any feedback pls let me know, thank u!

Community feedback

Elaine 11,420

@elaineleung

Posted

Hi Joel, about your question on the API, if you happen to be using Firefox like I am, then there's a caching setting in the browser that causes the next advice to not load right away. To fix that, you just need to add an object in the fetch method, like this:

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

One other suggestion here: You can try to change the width to max-width in your quote-card with a bit of margin around (e.g., margin: 1rem), and once you do that, you can try making your breakpoint smaller (e.g., 500px) since the card should be more responsive now.

Marked as helpful

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