Blynk

Blynk Web Dashboard

 Blynk Web Dashboard
------

A [Pen](http://codepen.io/shrikantgg/pen/oYgoxm) by [shrikant](http://codepen.io/shrikantgg) on [CodePen](http://codepen.io/).

[License](http://codepen.io/shrikantgg/pen/oYgoxm/license).

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
 <a class="navbar-brand" href="#">Blynk</a>
</div>
</div>
</nav>
<div class="container">
<div class="col-lg-2"><legend>Enter The Token</legend></div>
<div class="col-lg-5"><input class="form-control" id="focusedInput" type="text"></div>
 <div class="col-lg-5">  <button id="sub"  class="btn btn-primary">Submit</button></div>
</div>
 <br>
<div class="container">
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Project Information</h3>
  </div>
  <div class="panel-body">
<div class="container">
  <div class="col-lg-3"><label>Project Name :</label></div>
   <div class="col-lg-9"><label id="pn">------ </label></div>
  
    <div class="col-lg-3"><label>Board Type :</label></div>
   <div class="col-lg-9"><label id="bt">------</label></div>
</div>
    
  </div>
</div>
</div>

script.js

$(document).ready(function() {
  
 $("#sub").click(function(){
   
   var t =$('#focusedInput').val();

   var api = "http://blynk-cloud.com:8080/"+t+"/project";
   

    $.getJSON(api,function(data){      
var projectname =data.name;
 var boardTyp = data.boardType;
  $("#pn").html(projectname);
    $("#bt").html(boardTyp);
});
 });



});

scripts

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

styles

<link href="https://bootswatch.com/flatly/bootstrap.min.css" rel="stylesheet" />