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

Random Advice Generator with API

@Rabiaismail21

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

Community feedback

sambuka-a 420

@sambuka-a

Posted

Hi Nice solution. I would suggest that you work on loading and errors handling

Marked as helpful

0

@Rabiaismail21

Posted

hi @sambuka-a! Thanks for your feedback. Could you tell me how I can work on loading?

0
sambuka-a 420

@sambuka-a

Posted

@Rabiaismail21 Sure You can check my solution. I used try catch statement. So basically if there is an error, I can catch error object and take out it's value message. And later on I'm conditionally rendering the content. If there is an error - error.message will be displayed and if not actually advice will be displayed.

There is also finally statement, but you can skip it. I just wanted to play with another error when loading takes too long.

//this is my React data request is
try {
const response = await axios.get(`https://api.adviceslip.com/advice`)
setAdvice(response.data?.slip);
setLoading(false)
setError(null)
} //if there is ae error I will catch it here to use later for conditionally rendering content
catch (err) {
setError(err)
setLoading(false)
}

MDN, try...catch documentation

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