JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">

  <div class="row">

    <div class="col-md-5">

      <div class="form-group">
        <label class="col-md-12">Kart Bin</label>
        <div class="col-md-12 pb-3"><input type="text" class="form-control w-100" id="binNum" name="binNum"/></div>
        <div class="col-md-12"><button class="btn btn-success w-100" id="binKontrol"><i class="fas fa-search"></i></button></div>
      </div>

    </div>


    <div class="col-md-7" style="font-size:.8em;">

    1,    <span class="text-success" style="font-size:.9em;">-- SirketId sdaas</span><br/>
	5,    -- SubeId<br/>
	2013, -- Yil<br/>
	'540187',   -- Kod (önr; 478916)<br/>
	'ADVANZIA BANK, S.A.',   -- Açıklama<br/>
	35,   -- KartBankaId<br/>
	35,   -- BinBankaId<br/>
	0,    -- DebitKart<br/>
	'MASTER',   -- Organization (VISA, MASTER, AMEX, CUP, TROY)<br/>
	'YDKK',   -- Product (YDKK, YDDK, YIKK, YIDK)<br/>
	'OTHERBNK',   -- Grup (GARANTI, OTHERBNK, BONUSNET)<br/>
	2,    -- PosId<br/>
	'',   -- Marka (Bonus, Mil, MR, World)<br/>
	0,     -- Ticari Kart<br/>
	0, --Taksit <br/>
	'486388', -- Ekleme Personel Id<br/>
	'486388', -- Güncelleme Personel Id<br/>
	0, -- Kilitli<br/>
	0, -- Sanal Kart<br/>
	2, --PesinPosId<br/>
	2 --TaksitPosId<br/>

    </div>


  </div>

</div>

CSS

body {
  background: #e8e8e8;
}

JavaScript

$('#binKontrol').on('click', function() {
  $.ajax({
    type: "GET",
    url: "https://lookup.binlist.net/"+ $("#binNum").val() +"",
    //data: "name=John&location=Boston",
    dataType: "json",
    success: function(response) {
			//$('#kontrolEkran').html(response);
			$("#banka").html("Organizasyon : "+ response["scheme"]);
			var debit = 0;
			
			if(response["type"] === 'debit' ) { 
				debit = 1; 
			}
			
			$("#DebitKart").html(response["bank"]["name"]);
			$("#Banka").html(response["bank"]["name"]);
    }
  });
});