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

Roll the dice to get advice! ( JS, async/await )

Marjan 320

@MarjanZivkovic

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


Had lots of fun building this small project. Feedback appreciated

Community feedback

@FrostemanNeogard

Posted

This is great! I love the extra spin animation on the dice, that's a really nice touch.

There's only one thing I have to suggest. Fetching advice doesn't seem to work on Firefox. To fix this, all you have to do is add {cache: "no-cache"} as a second parameter on the fetch function. That would look something like this:

const response = await fetch('https://api.adviceslip.com/advice', {cache: "no-cache"});

This does remove the two second cooldown on Chrome, though that may be unwanted.

Hope this helps!

Marked as helpful

0

Marjan 320

@MarjanZivkovic

Posted

@FrostemanNeogard Thank you! Had to install Firefox to check it, and you're right. Not working! Thanks a lot! This was helpful

1

@Chaffexd

Posted

This is a well though out attempt at the project!

One piece of feedback I have is when you rotate through the quotes, the container size changes. Have you thought about maintaining a single container size so it doesn't change?

Also, it might be a cool idea to consider using Axios to perform your GET request to learn more technologies!

Nice job!

Marked as helpful

0

Marjan 320

@MarjanZivkovic

Posted

@Chaffexd Yes, you're right! I thought about doing that. The con is that when the advice has little text you get a lot of empty space in your container. On the other hand, it might be better for UX

1

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