THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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

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>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
</head>
<body>

<section>
<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>
<div class="centerDiv">
<div class="details">
<label>ENTER YOUR NAME</label><br>
<input type="text" name="" id="nameid">
</div>

<div class="imgdiv">
<img src="img.png" width="200" height="200" class="imgchange">
</div>

<button> Click Me</button>
</div>
</section>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
$(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 :)

15 comments:

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

    ReplyDelete
  2. hello dear sir
    pls make a project on sending sms using api of http://customer.bulksmsplans.com/

    ReplyDelete
  3. hello dear sir
    pls make a project on sending sms using html css api php

    ReplyDelete
  4. sir i need a tutorial to travel book website .. how to integrate a hotek booking api , flight booking api to website using php

    ReplyDelete
  5. 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.

    ReplyDelete

  6. Thanks for taking the time to share this information here. This is very informative and nicely described. If anyone looking for the Google Search Api, Visit SERP House.

    ReplyDelete
  7. hello sir mujhe cricket live ka source code chaiye

    ReplyDelete
  8. sir how can i make cloud mining site

    ReplyDelete
  9. Sir please ek video aisi banayeye jisme html css javascipt php mysql sbki help se ek complete project bana ho. Mai new hu mjhe starting se pura sikhna h kaise hota h please help me

    ReplyDelete
  10. Please sir help me mjhe sbke bare m theory pta h bt implement krna ni aata full project banayeye jisme sb kch starting se btaya ho html css js mysql and php

    ReplyDelete