Advice Generator using Vanilla JS, CSS, HTML

Hello @dostonnabotov const res = await fetch(https://api.adviceslip.com/advice/${number});

The line above is what I used to fetch data. The fetch function takes in 2 argument fetch(url, and options). The URL is the API source that I use to fetch the data from. If you visit the link w/o '${number}'; there is more to explore. Options is generally where you indicate which request method are you trying to obtain. For our case, it is a "GET" method. By default if you don't put anything after the URL then its default to a "GET" method. If you want to you can it would look like this:

const options = { method: "GET" }

There are others too such as POST, PUT, DELETE, PATCH etc..

The fetch method returns a promise. A promise is something that will happen in the future. For instance, when you are requesting information/data from an external source, it takes time for the HTTP requests to send back and forth data. To prevent our codes from being blocked while fetching information, promises will run in the background asynchronous so the rest of our codes will continue to run.

const data = await res.json();

The line above is right after the fetch() function in which it will return me an object in json format. From there I use javascript destructuring to extract data I got back the promise:

const {
  slip: { id, advice },
} = data;

'data' is the object, and within that object contains other objects and the one that we need for this project is slip and inside slip are id and advice.

const number = Math.floor(Math.random() * 200 + 1); const res = await fetch(https://api.adviceslip.com/advice/${number});

The line above generate a random number which I use interpolation to programmatically changes the quote each time it is clicked. And to have the quote generate upon the app opens, I call the function right away.

One thing to note though is that fetch() alone doesn't do anything. You need to chain it with .then().catch(). This is because a promises has 3 phases, pending, fulfil or reject. .then() fulfill the promise while .catch() will catch the error. This is where it gets a little tricky with error handling in javascript as well. I didn't use .then or .catch() because I am using async/await. This is another wait to chaining promises in javascript.

Sorry Its a lot to read. I recommend taking a course on udemy from jonas schmedtmann: Node JS course and his javascript course. He explains everything so well. You will learn a lot from him. I hope this help.