Using the JavaScript fetch() method to get data from an API + Mini Project 👨‍💻

Photo by Christopher Robin Ebbinghaus on Unsplash

Recently I was fascinated by how we can use APIs to fetch data and display them on your website, I’ve created web apps using API’s but it was all just from tutorials and I never created anything from scratch on my own.

So, I decided to give it a shot and started with a simple API called Random User Generator API. You can check it out from here 👈

With that said, let’s dive straight into it.

(You can find the completed app here from my GitHub repo.)

This is how the finished projects gonna look 😍👇

(We don’t any styling in it, it’s just plain HTML and JavaScript. You can add styling to this and make it look prettier)

Here’s what we’re going to be learning today 👇

1. Using an API — https://randomuser.me/api
2. Using the fetch() method in ES6 JavaScript to grab data from the API.
3. Displaying the fetched data from the API in a Website.

Before we dive into coding… Let’s talk about this specific API.