How I Build Dog Generator using HTML, CSS, JavaScript, and Dog CEO API.
Hi everyone,
Welcome to my blog. In this post, I will show you how to code your first API project.
In this project, When we choose a dog breed from a select option i.e. sending the request to the server, then the server responds with an image of a dog of that breed.
Link- dogbreedapi100devs.netlify.app
Github Link- github.com/shubhamsigdar1/Dog-breed-API
What is API?
API(Application programming interface) is a Simple interface that enables us to do some complex actions.
Think of a camera
The camera gives us a simple interface(i.e. on and off button) that enable us to do on and off the camera after clicking the on or off button then some complex action happened internally that turns the camera on and off.
Here, Simple interface - Button and Complex action - Turing on and off.
Think of a Restaurant
Restaurants have a simple interface i.e. menu that enables me to make a request and I get the food and I don't know what complex action happens in that Kitchen.
Here, Simple interface - Menu and Complex action - Kitchen.
The Same thing happens when we use API
Here, URL is the simple interface that enables us to make a request to the server and on the server side some complex actions happen to fulfill our request, and then the server responds with JSON.
What is JSON?
It is basically an object that is coming back from the server and then we can use that object to get the data or pull the data out.
Syntax of API
This URL actually goes to the Dog CEO Server and Dog CEO Server listening for these fetch requests,
When it hears these fetch requests it goes and grabs data from its database and then it responds with that
data in the form of an object(i.e. JSON).
.then(res => res.json()) // whatever we get back from the server make sure it is JSON data.
.then(data => { console.log(data) }) // to see data inside the object
.catch(err => {
console.log(error ${err})
}); // If something went wrong i.e. the server is not able to respond then error message will be printed.
How to get started?
1. Install VS Code code.visualstudio.com/download
2. Install the extension(open in browser) in Vs Code.
3. In your text editor, create a folder Dog-breed-API and then create three separate files i.e. HTML, CSS, and JavaScript. This just basically makes your code more organized.
Let's Start working on projects
First, we start from HTML files, where you can link CSS and JavaScript files using the code below:
Below is the HTML code
In the above HTML code,
1. Code to link your HTML with the CSS file and we write it inside the head tag
2. Code to link your HTML with the JavaScript file and we write it inside the body tag
Below is the CSS code
In the above CSS code,
1. How I add images in a section?
I use always this property for img tag and Section in which we have to put the image I apply property "overflow: hidden;"
2. How I add Background images?
Below is the JavaScript code
In the above JavaScript code,
1. fetch('dog.ceo/api/breeds/list/all')
fetch method is used to send the request to the server and grab the request from the server.
2. console.log(data)
We get objects containing property messages and status.
3. const breedsObject = data.message;
To grab value of the message from the object data we write data.message.
4. const breedsArray = Object.keys(breedsObject)
Object.keys() method returns an array of a given object's.
To Understand more about how object.keys() work, I refer MDN (developer.mozilla.org/en-US/docs/Web/JavaSc..)
5. How to create an option element in the DOM and after that insert it into the select tag?
- Step1:- Create an empty option element using document.createElement('option').
- Step2:- Then set its attributes like (value, class, etc.)
- Step3:- Finally, insert it into the document.
6. We want that when we change the option of dog breed in the select tag and then run the function(), For that, we write code
7. let url = https://dog.ceo/api/breed/${event.target.value}/images/random
This interface or URL we use has a query parameter that enables us to plugin different dog breeds that we would want.