In this post, we will learn how to fetch data from 3rd party API and show the result on the HTML page. This time, the data we will fetch is an image from Dog API which is very incredible. Without any further ado, let's get started!

First Step

Define the HTML. All we need is a button and img tag to place the result later. Here is how it’s done.

Define the HTML

Very simple, nothing fancy here. Don’t forget to give the button and img tag an id so we could get access to it in javascript later.

Second Step

Now we will step into javascript…

In order to create a JavaScript counter, there are many ways to do it. In this post, we will learn two ways on how to do it.

1. Using setInterval

setInterval is a method in javascript to do some task repetitively in a certain time. We will directly create it in script tag inside HTML file, and console.log it into the browser. Here is how it is look like.

an image on how to create counter
an image on how to create counter
Create counter

There we declare a variable called counter, then we assigned value 0 to it. Then we create setInterval method to repetitively increment the counter value, and it will increase every 1000ms or every 1…


Final year IT student with high interest in website development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store