Skip to content
Submitted almost 2 years ago

Advice Generator with tailwind CSS and Vanilla JS

accessibility, animation, tailwind-css, fetch
Nayan Bhatt•1,000
@freaky4wrld
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Huh... submitting after a while.... been working on some stuff!! Well in this project I tried to implement my fetch learning..... but I guess there's some issue with the API fetching itself it works fine on chrome, but on firefox it fetches the same response again and again..... So a bit of help there would be appreciated!!!

Thanks for all your appreciation and advice, glad you made the effort to preview my project and point out areas of improvement..........

Code

Please log in to post a comment

Log in

Community feedback

  • Lord Robins•610
    @ZenitsuAg

    Hello Nayan, how you doing today? Your code is amazing!! I like the animation, looks great, you can fix the issue you're facing in firefox with the piece of code.

    • On line 8 of your script.js, you have this:
    fetch('https://api.adviceslip.com/advice')

    Update it to this

    fetch('https://api.adviceslip.com/advice', { method: 'GET', mode: 'cors', cache: 'no-cache' })

    The browser will stop retaining the old advice and give a new advice each time you ask.

    • It'll be better if all your code is inside a landmark tag like main footer, you did this but you left out the button's div.

    • You can also center your content with

    <body class="...other-classes flex justify-center items-center">
    • The node_modules folder is not necessary in your repo, so you can remove it.

    And that's all.

    Happy Coding :)

    Marked as helpful

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