API definition with example Programme
Today, you will get the whole knowledge of an API and I will also show you an example of using an API in our programme.
What is an API?
An application programming interface (API) is a computing interface that defines interactions between multiple software intermediaries.
following the definition is complicated to understand but it expresses too much in too few words.
Let us understand the API with an example, suppose you have downloaded an application and it has many sign-in options like sign-in with Facebook, Twitter, Gmail. In that application, they are using the API of Facebook, Twitter, Gmail etc. to sign in to their application. So, API is a programme that provides access to a database from another application or website and works as a mediator for a purpose like sign-in or showing data.
Another example is Trivago which uses the API of many hotel booking sites to show its useful details and to book a hotel.
Example Programme of API
First, make an HTML file named what you want, in my case I will name it as API.html and write the code mentioned below. In the last, I will explain this programme.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AVATAR by NAME</title>
<link rel="stylesheet" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>Tell me your name I will give an avatar relatated to your name.</h1>
<div class="division">
<div class="details">
<label for="">Enter Your Name</label><br>
<input type="text" id="name">
</div>
<div class="imgdivsion">
<img src="" alt="" class="avtaar" height="200px" width="200px">
</div>
<button id="getavtaar">GET your Avtaar</button>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#getavtaar').click(function() {
const name = $('#name').val();
$('.avtaar').attr('src',`https://joeschmoe.io/api/v1/${ name }`);
$('.avtaar').attr('alt',name);
});
});
</script>
</body>
</html>
Now make another file for designing its output named stylesheet.css or as you want.
*{padding: 0; margin: 0; box-sizing: border-box; font-family: 'Oswald', sans-serif;}
section{width: 100%; height: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; background: blue;}
section h1{ text-shadow: 2px 5px 5px #2f3542; word-spacing: 10px; margin-bottom: 15px;
font-size:2.5rem; text-transform: uppercase; letter-spacing: 2px; color: white;}
.division{ width: 60%; height: 450px; box-shadow:2px 2px 2px 5px white; display: flex;
flex-direction: column; align-items: center; justify-content: center; background: white; color: gray;}
.details{ text-align: center; text-transform: uppercase; }
.details label{font-size: 1.4rem;}
.details input { padding: 10px; background-color: #ff6b81; color: white; text-align: center;}
.details input[type=text]:focus {
border: 3px solid #555;
}
#name { color: black; }
.imgdivsion {margin: 30px 0;}
button {
background: #3498db;
width: 180px;
padding: 4px 0;
border-radius: 3px;
color:white;
font-size: 1.2rem;
letter-spacing: 2px;
background-color: darken(#f1c40f, 20%);
}
button:hover {
cursor: pointer;
}
Following output:-
Explanation of the programme
when the page is ready the jquery function will run and when typing the name and clicking to the button name GET your avatar a function will-call, which is mentioned below.
1. $('#getavtaar').click(function() {
2. const name = $('#name').val();
3. $('.avtaar').attr('src',`https://joeschmoe.io/api/v1/${ name }`);
4. $('.avtaar').attr('alt',name);
5. });
In the 2nd line, the value will transfer to a constant variable (name) from the input tag which id is the name.
In the 3rd line, It is changing the src value of the img tag.
the link https://joeschmoe.io/api/v1/${ name } is the API link to get the avatar.
${ name } here we are sending the value of a variable (name) to that link to get the avatar by name.
In the 4th line, We are changing the name of the alt attribute to the variable's value of the name.
You can support me with little money. My payment UPI id is 8839898858@paytm or you can bank transfer Ac. no. 919993153038 IFSC PYTM0123456 Name Aditya Narayan Soni
No comments