CoinGecko

by Kevin Pliester

HTML

<div class="row">

  <div class="col">
    <div class="card">
      <span id="gecko_eur"></span> EUR
    </div>
  </div>

  <div class="col">
    <div class="card">
      <span id="gecko_eur_market_cap" class="two_chars"></span> Milliarden
    </div>
  </div>

</div>

CSS

body {
  background: #333;
  font-family: Arial;
}

.row {
  display: flex;
  margin: 5% auto;
  padding-right: -25px;
}

.col {
  flex: 1 0 auto;
  text-align: center;
  padding-right: 25px;
}

.card {
  color: #333;
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 0 5px #222;
  font-weight: bold;
}

JavaScript

(function($) {
  const CoinGecko = {
    init: function() {
      let ajaxRequest = $.ajax({
        url: "https://api.coingecko.com/api/v3/simple/price?ids=cardano&vs_currencies=eur&include_market_cap=true",
        method: "GET",
      });
      ajaxRequest.done(function(response) {
        let data = response.cardano;
        $.each(data, function(index, content) {
          if ($("#gecko_" + index).hasClass("two_chars")) {
            content = content.toString().substring(0, 2);
          }
          $("#gecko_" + index).html(content);
        });
      });
    },
  };

  $(function() {
    CoinGecko.init();
  });
})(jQuery);