API in Hindi | Create Project using API in Website in Hindi 2019

Welcome all to API in Hindi. How to use API and Create a Mini Project using API in javascript with Source code. How API works in Hindi. An API (Application Programming Interface) is a software-to-software interface that enables two applications to exchange data among each other. Though this might sound a little boring, they are used a lot in the real world to create some amazing applications.

Index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>WHAT DOES YOUR NAME SAY ABOUT YOUR PERSONALITY?</h1>

<p> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi

Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </p>

<label>ENTER YOUR NAME</label><br>

</div>

</div>

<button> Click Me</button>

</div>

</section>

$(document).ready(function(){

$('button').click(function(){

const name = $('#nameid').val();

alert(name);

$('.imgchange').attr('src',`https://joeschmoe.io/api/v1/${name}`);

const b = $('.imgchange');

console.log(b);

});

</script>

</body>

</html>

CSS Files

*{padding: 0; margin: 0; box-sizing: border-box; font-family: 'Luckiest Guy', cursive;}

section{width: 100%; height: 100vh; display: flex; justify-content: center; flex-direction: column; align-items: center; background: #2ed573}

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;}

.centerDiv{ width: 60%; height: 450px; box-shadow:2px 2px 2px 5px white; display: flex;

flex-direction: column; align-items: center; justify-content: center; background: #57606f; color: white;}

.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;

}

.imgdiv {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;

}

DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi

Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)

8 comments:

UnknownApril 22, 2019 at 7:41 AM
hlw sir,

I want to tell you i have crete a website for bootstrapped on local drive in my computer file but how to show on google page.

please sir tell me solution.
UnknownMay 7, 2019 at 6:54 AM
hello dear sir
pls make a project on sending sms using api of http://customer.bulksmsplans.com/

UnknownMay 18, 2019 at 10:08 AM
nice
RajaJune 19, 2019 at 4:54 PM
hello dear sir
pls make a project on sending sms using html css api php
UnknownOctober 28, 2019 at 5:39 AM
sir i need a tutorial to travel book website .. how to integrate a hotek booking api , flight booking api to website using php
UnknownNovember 8, 2019 at 8:31 PM
https://kyafi.com
SERP HouseDecember 7, 2019 at 1:10 AM
Thanks for such a pleasant post. This post loaded with lots of useful information. Keep it up. If you are looking for the best information and suggestions related to Google Search Api then visit SERP House.