Need help with integration API to my webpage. pls help!

Hi all

Would like to ask for help with integration API information to my website.

Generally I would like to run a webpage which will display actual price + price movements of selected cryptocurrencies.

This is how it looks now:
https://masternodes.watch/

Need to integrate API informations to my webpage table. (for example “Price” section for “Bitcoin”)(and more etc…)

I Don´t know how to make a cell ("price section) variable (for example live data from API)

For example This is actual Bitcoin “price”. Using Coingecko API= https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd

(to get actual price for Dash just change : ids=dash)
(to get actual price for Netchain just change : ids=netchain)

This is how code looks like:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Masternodes monitor</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
  <!-- MDBootstrap Datatables  -->
<link href="css/addons/datatables.min.css" rel="stylesheet">
</head>

<body>

  <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="th-sm">Coin name
      </th>
      <th class="th-sm">ROI
      </th>
      <th class="th-sm">Daily income
      </th>
      <th class="th-sm">Price
      </th>
      <th class="th-sm">Volume
      </th>
      <th class="th-sm">Marketcap
      </th>
      <th class="th-sm">Node price
      </th>
      <th class="th-sm">Coins for MN
      </th>
      <th class="th-sm">Nodes
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bitcoin</td>
      <td>Unknown</td>
      <td>Unknown</td>
      <td>https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd </td>
      <td>Unknown</td>
      <td>$200,320,800</td>
       <td>Unknown</td>
       <td>Unknown</td>
       <td>Unknown</td>
    </tr>
    <tr>
      <td>Dash</td>
      <td>7.5%</td>
      <td>14,40 $</td>
      <td>https://api.coingecko.com/api/v3/simple/price?ids=dash&vs_currencies=usd</td>
      <td>Unknown</td>
      <td>$25,170,750</td>
      <td>$69,696.22</td>
      <td>1000</td>
      <td>4001</td>
    </tr>
    <tr>
      <td>Netchain </td>
      <td>350%</td>
      <td>0,12 $</td>
      <td>https://api.coingecko.com/api/v3/simple/price?ids=netchain&vs_currencies=usd</td>
      <td>14,40 $</td>
      <td>$3,000</td>
      <td>$7</td>
      <td>100.000</td>
      <td>55</td>
    </tr>
      </tbody>
  <tfoot>
    <tr>
      <th>Coin name
      </th>
      <th>ROI
      </th>
      <th>Daily income
      </th>
      <th>Price
      </th>
      <th>Volume
      </th>
      <th>Marketcap
      </th>
      <th>Node price
      </th>
      <th>Coins for MN
      </th>
      <th>Nodes
      </th>
    </tr>
  </tfoot>
</table>

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- MDBootstrap Datatables  -->
<script type="text/javascript" src="js/addons/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
});
</script>
</body>

</html>

maybe these links can help you out: