Submitted almost 3 years ago

Responsive Advice Generator

react

Jay-Ann Bravo-Harriott•20

@jbravoh

A solution to the Advice generator app challenge

Preview Code

Solution retrospective

It took me a while to figure out how I was going to fetch the API as it's done a variety of ways, but once I got that sorted my priority was the CSS, especially the responsive design.
The code in the return statement looks quite messy, does anyone have a cleaner way to organise the code?
What's best practice when fetching data from an API as well as media queries for responsive design?

Code

Please log in to post a comment

Community feedback

imad•3,330
@imadvv
Posted almost 3 years ago
Greeting Jay-Ann Bravo-Harriott!! Congratulations for completing your challenge!, 👏👏👏.

You did great on this challenge, but there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them simply pass an optional parameter {cache: 'no-cache'} to fetch.
```
 const getAdvice = () => {
    const url = "https://api.adviceslip.com/advice";

    fetch(url, {cache: 'no-cache'})

// ...
```
Overall, good job, have a great day/night, and keep coding 👍.

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