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 App using Fetch API(async-await) and Media Query

#fetch

@efecollins

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


Are there any best practices when using fetch API?

Community feedback

David 8,000

@DavidMorgade

Posted

Hey Evbowe, congrats on finishing the challenge! pretty good job, your API calls are working properly

Regarding your question, yes, you should try using a try catch block in your functions so if the API fails to load the data it will give you an error that will get catched, then with this error you can for example log it into the console, or display it on the screen, or return a error state... Million of posibilities.

Apart from that, try using a native <button> for the dice instead of a <div> it fits much better the purpouse, you could also add the event listener to the entire button, because right now is only working on the dice image.

Hope my feedback helps you! if you have any questions, don't hesitate to ask! great work

Marked as helpful

1

@efecollins

Posted

@DavidMorgade Thank you very much. I'll make the changes soonest

1

@efecollins

Posted

@DavidMorgade Hi, thank you once again. I did as you advised but try catch block didn't catch the error instead I added a .catch(function(error)) {console.error(error)} to catch it and this worked.

I also corrected the dice and made it a button. Thank you very much.

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