Skip to content
Submitted about 1 year ago

Advice Generator App Using Tailwind & Fetch API

Jackson Whiting•360
@jacksonwhiting
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

I had two issues with this app (by the way, this was my first time working with third party APIs). I used https://api.adviceslip.com/ to generate the advice. Any help with these two questions would be amazing. Thanks!

  1. The icon (used to click and generate advice) seems to go inactive for a period of time while the data is being fetched. If I click the button twice in a row within a certain timeframe, the second click does nothing. Maybe this is normal because it takes some time to generate the data.

  2. For some reason, Firefox is giving me issues fetching data when clicking the icon. All other browsers work fine. Firefox will fetch the data and display it on startup. It will also fetch and work perfectly when I have the developer tools open. When I close the developer tools, the icon click no longer works, and I can't figure out why.

Thanks for any help!

Community feedback

  • Julia Fok•80
    @fokjulPosted about 1 year ago

    In my case it worked in Firefox only when cache was disabled on the Network tab (the inspector should be open). To make it work in Firefox, I have added {cache: "no-cache"}. As a result the code is: fetch('https://api.adviceslip.com/advice', {cache: "no-cache"})).

    Marked as helpful
    0
    Jackson Whiting•360
    @jacksonwhitingPosted about 1 year ago

    @fokjul Thank you for the help!

    0
  • Emmanuel Oluwatobiloba•380
    @purrrpleliptonPosted about 1 year ago

    on the API's site i.e., api.adviceslip.com, it's said on there that sending multiple requests within 2 seconds will return the same advice as the firstly generated one is cached, so you have to wait 2s before clicking again will generate a different slip.

    Marked as helpful
    0
    Jackson Whiting•360
    @jacksonwhitingPosted about 1 year ago

    @purrrplelipton Thank you for the help! I see that now and adjusted my fetch request.

    0

Please log in to post a comment

Log in with GitHub

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