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 :)

8 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