/advice-generator-app-main

A web app that gives you advice to start your day!

Primary LanguageCSS

Frontend Mentor - Advice Generator App Solution

Table of contents

Overview

  • This is my attempt making an advice generator using API for the first time

Screenshot

Advice Generator App

Links

My process

  • I started with looking up the basic of fetching JSON from the API and useState() to render the advices.
  • I found out that I could not fetch an advice before the website is rendered using useState(), so I rewrote my App function into a class component.
  • After making sure the website was functioning properly, I started styling by centering the div and creating the dice button.
  • I learned how to use animation for the first time and it felt amazing.
  • I also centered the divider image so that it will adjust itself with the size of the div instead of using different images for desktop and mobile.

Built with

Things to improve

  • I managed to fetch the API before the website renders using componentDidMount in the App class component, but I also had to write the same code for setState which is quite inefficient. I hope I would know some other way to do it somehow.
  componentDidMount() {
    fetch('https://api.adviceslip.com/advice')
      .then(response => response.json())
      .then(json => this.setState({
        advice: json.slip
      }));
  }

  getAdvice = () => {
    fetch('https://api.adviceslip.com/advice')
      .then(response => response.json())
      .then(json => this.setState({
        advice: json.slip
      }));
  }

Author