Atoka Api: Search by VAT

by margonar

HTML

<div id='form' class='block-content'>
  <p>
    <label>Token: <input id='input-token' val=''/></label>
  </p>
  <p>
    <label>Vat: <input id='input-vat'/></label>
  </p>
  <button>Find Companies</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.block-content {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s;
  margin: 30px;
  width: 300px;
}

li {
  text-align: left;
  list-style: none;
  padding-bottom: 20px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

// ATOKA
var atokaUrl = "https://api.atoka.io/v2/companies";

// find elements
var inputToken = $("#input-token");
var inputVat = $("#input-vat");

// handle click and add class
$("button").on("click", function() {
  var val = inputVat.val();
  var token = inputToken.val();

  // GET request to Atoka Companies Search, with only the VAT in input
  $.get(atokaUrl, {
    token: token,
    vat: val,
  }).done(function(data) {
    let results = data.items.map(function(item) {
      // each result has this structure
      // {
      //   "name": "the company name",
      //   "country": "it",
      //   "fullAddress": "address of the registered headuarters",
      //   "id": "internal Atoka identifier"
      // }

      return $(`<li>${item.name}<br/>${item.fullAddress}</li>`);
    });

    var resBlock = $('<ul>');
    resBlock.addClass('block-content').html(results);
    $('#form').after(resBlock);
  });
});