In this blog series, we will be making a simple vanilla javascript site using this amazing Dog Api . We will be building the whole project in steps. Completing each step will be like a milestone and we will introduce new API and concepts as we go ahead.
Final Output
If you are getting confused about what actually is an API then you can check this blog on freecodecamp.
Part 1 – Getting a random dog image
Pre-requisites
- Basic HTML
- Basic CSS
- Basic understanding of Javascript variables,functions
- Basic understanding of DOM (document object)
- Fetch Api (Javascript)
- Promises (Javascript)
Overview
In this step we are just going to get a random image url from the api and show it in an image. We will not be using this feature in the final site. This part is just to demonstrate how to use an api.
If you check the documentation of the dog api then you will notice there’s a section for the random dog image . You can see that the API (url) to get the random image is https://dog.ceo/api/breeds/image/random . If you click this url you will get something like this in the browser:
{
"message": "https://images.dog.ceo/breeds/keeshond/n02112350_9791.jpg",
"status": "success"
}What’s that you ask? That is the response in a json format. Check this link to learn more about it. You will be using this alot in javascript so get a good understanding of this.
Now, as we can see we can get the image url from the message field. We’ll use this when we get to writing javascript for it.
Writing code
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- we will set the src of this img tag from js-->
<img id="imageRandom"/>
<script src="main.js"></script>
</body>
</html>This code is pretty straightforward. We just added an <img> tag to show the random image which we will get from our api
CSS
#imageRandom{
width: 250px;
height: 250px;
}We just gave some style to our image. i.e set height and width
Javascript
const imageRandom = document.getElementById("imageRandom");
function getRandomImage(){
const randomImageApiUrl = "https://dog.ceo/api/breeds/image/random";
// we are using fetch api to make rest api calls. you can use axios use.
// we are also using promises here.
fetch(randomImageApiUrl)
.then(function(response){
// we get raw response. need to first convert it into json format so we can use the data easily
return response.json();
})
.then(function(json){
// now we got the json . we can use this to update any data in html
console.log(json);
var imageUrl = json.message;
//update the image with new random url
imageRandom.src=imageUrl;
})
.catch(function(error){
// if any error occurs like no internet connection then this callback will be called
console.log(error);
});
}
//call the getRandomImage function whenever page loads
getRandomImage();This is the interesting part. We made one function to fetch a random dog image . After fetching the json , we get the image url and set this as a src in our image tag. We then called this function once at the end so the function will run whenever the page refreshes or loads.
Output
All the code is available on github
Cheers for you if you made it this far๐ ๐
What’s Next
In the next part we will fetch the list of all breeds of dogs and show it in a list so user can select any breed and get a list of photos for that breed.
Stay tuned ๐ค๐ป and keep coding