Random Advice Generator using React, TailwindCSS and Advice Slip API

• Random Advice Generator using React, TailwindCSS and Advice Slip API
  • Built with
  • Preview
  • Process
  • What I learned
  • Links

Built with

• React JS
• TailwindCSS
• Advice Slip API

Preview

Process

This was a relatively easy challenge. You create the component fetch the API and inject them into elements on the page. I have also added some slight animations to the button. This is my 3rd project using API calls and I'm getting more familiar with handling data and displaying them on the app, along with handling possible errors.

You click the button, it loads an advice and the advice number. The site is responsive for mobile screens as well.

What I learned

I learned that using

try {
    ...
} catch {
    ...
} finally {
    ...
}

helps in case API call fails. It is an effective way to handle this situation.

Also learned about light/dark theme functionality using React states and saving them using localStorage.

It was a fun challenge that taught me a lot of new things!

Links

Check the source code or live preview of the site.

• GitHub:
• Deploy: