API fetch a paws

I'll be introducing API fetching in this tutorial, as shortly as possible. We'll be using basic HTML and JS to keep this tutorial simple. You can skip the parts you already know the meaning of.

What are we gonna build?

Building a cool random cat image fetcher sounds like the right start for understanding APIs. We'll use a simple API that I just found while writing this tutorial. For this, you need to have a live server extension installed in your Visual Studio code. I have provided the Github repo with template HTML and CSS code to simplify things further.

Here we start, create a folder open a terminal and write the following command

touch index.html
code .

• touch command creates a new file.

• code command launches vs code in the current folder.

Copy and paste the code from this link to your index.html. Try going through all the code to get a better understanding of our page's structure.

Click on Go Live button at the bottom to launch the live server.

Tutorial

JS functions that we'll be using,

fetch()
then()
json()

• fetch() is a predefined function in JS that helps in making requests to API endpoints.

• then() function helps you get the APIs results and now which you can then use in your magical code.

• json() function will convert the results of our API to a JSON file which is easily readable by JS

A request is when we ask the API to provide us with data. There are specific APIs that require you to have access to them, they will additionally require you to pass the authentication token while asking them for data. But don't worry we will use a simple cat image fetching API here.

This is the API https://api.thecatapi.com/v1/images/search we'll use.

If you open the above URL in a new tab, you'll see something in JSON format. A JSON format is a java script object, yes that's what an API returns. And if something on a new tab returns you a JSON then you call it an API endpoint. Now let's look at how we can use it in our code.

Few more JS functions, help to interact our HTML with JS,

innerHTML()
createElement()
setAttribute()
classList.add()
appendChild()

They will help us to introduce the image tag along with the src attribute whose value we will fetch from the API. If you already know about them, then move on to the next section.

<img src="https://cdn2.thecatapi.com/images/ea3.jpg"></img>

• innerHTML() - alters the HTML of tags inside selected tag

• createElement() - creates a new HTML element

• setAttribute() - sets attribute to the HTML tag

• classlist.add() - adds a class to the HTML tag

• appendChild() - injects the JS-created tag from the above tags into the HTML code

JS arrow functions,

(e) => {
    console.log(e)
}

We'll be using these a lot, in the above arrow function, e is given as a parameter in the above function and console.log will print the value of e in the console.

Now, go under the script tag, and write along the following code,

let imgDiv = document.querySelector(".imgDiv")
imgDiv.innerHTML='';

let catsImgUrl ;
let imgEle = document.createElement("img")
imgEle.classList.add("showcase")

fetch("https://api.thecatapi.com/v1/images/search").then(
    (response) =>
     response.json()
    )
    .then ((data) => {
        catsImgUrl = data[0].url;
        imgEle.setAttribute('src',`${catsImgUrl}`)
        imgDiv.appendChild(imgEle);
    })

We'll be breaking the above code into smaller chunks

let imgDiv = document.querySelector(".imgDiv")
imgDiv.innerHTML='';

let catsImgUrl ;
let imgEle = document.createElement("img")
imgEle.classList.add("showcase")

We first select the div with class="imgDiv" and then set the HTML for tags inside it to ''. Next, we declare a catsImgUrl variable to store the image link that we will get from the API call. Then, we create a <img> tag and store that in imgEle variable and add a class "showcase" to it.

fetch("https://api.thecatapi.com/v1/images/search").then(
    (response) =>
     response.json()
    )

We introduce the API URL to the fetch() function and once the results are given back by the API they are taken as a parameter to the arrow function that converts the results into a JS object.

    .then ((data) => {
        catsImgUrl = data[0].url;
        imgEle.setAttribute('src',`${catsImgUrl}`)
        imgDiv.appendChild(imgEle);
    })

This JS object goes as a parameter to the next arrow function, now our second task is to set the src of the image tag we created earlier with the image URL given by API. API results are in the form of an array of objects where we choose the first object of the array and use its URL as our random cat's image link. We do so with setAttribute() and then we release this tag to the HTML world using appendChild().

If you correctly follow, then you can successfully see a cat image on your window.

Now, your next task is to look for a dog image API to use that above and also add a generate new button so users can directly generate new cat images without having to reload the page!

Here is the link to the project: https://anshss.github.io/apifetch-tut/

Github repo: https://github.com/anshss/apifetch-tut