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 challenge

#bootstrap
Attila 290

@unexunderscore

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


It's my first time where I need to use API. I watched a youtube video about how to use and get value from api url. So I don't understand it perfectly yet, but it's was good practice for me. I didn't find any other way to get new call from API just the page reaload with onclick method. So if you have any better suggestion then I would gladly to know. Thanks!

Community feedback

Nakoya Wilson 1,530

@nakoyawilson

Posted

Instead of having location.reload(); in the randomFunction() function, you can include the fetch code directly but you would need to call the function once so that there is data when the page initially loads. Then on each click data will be fetched from the API.

function randomFunction() {
  fetch("https://api.adviceslip.com/advice")
    .then((data) => data.json())
    .then((advice) => generateAdvice(advice));
}

randomFunction();

Also, to maintain separation of concerns, I would suggest removing the onclick="randomFunction() from index.html and adding an event listener to dice from the script.js file.

Marked as helpful

1

Attila 290

@unexunderscore

Posted

@nakoyawilson

I changed the code, but it doesn't work in firefox browser until I add to fetch the option cache: "no-store". Without it I always get the same data from fetch.

Thank you for your help! Have a nice day!

0
Nakoya Wilson 1,530

@nakoyawilson

Posted

@unexunderscore You're welcome and glad you were able to find a solution that worked for you. You made me realise that my solution also wasn't working in Firefox so thanks for pointing that out.

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