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 w/ React & styled-components

@paulaabro

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


Wanted to add a loader but don't know how to make it for a repeating content

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Paula, I used a loader in my solution, both for when the page loads and also for each time the dice is clicked. I've seen others do it too, and I think we all write ours a bit differently. Anyway, instead of explaining how I did it, I'll just share my solution with you, and you can just pick apart the code: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9

One comment I have about your app: I tried to load the next advice but it wouldn't load, which is most likely due to Firefox's caching setting. To get around this so that Firefox users can also use your app, you can try adding a request object. Since you're using axios, it might look something like this:

const config = {   
   'Cache-Control': 'no-cache',
   'Pragma': 'no-cache',    
   'Expires': '0',
 };

axios.get("https://api.adviceslip.com/advice", config)

Anyway, hope some of this helps you out!

Marked as helpful

2

@paulaabro

Posted

@elaineleung couldn't make the firefox work yet but researching it the code gives me a cors error

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