<html>
<head>
    <meta charset="utf-8" />
    <title>Get Multiple Exchange Rates</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Get Multiple Exchange Rates</h2>
    <div id="input-container">
        <div class="input-set">
            <input type="text" class="currency" placeholder="Enter currency (e.g. BTC)" value="BTC" />
            <input type="text" class="base-pair" placeholder="Enter base pair (e.g. EUR)" value="USD" />
        </div>
        <div class="input-set">
            <input type="text" class="currency" placeholder="Enter currency (e.g. BTC)" value="ETH" />
            <input type="text" class="base-pair" placeholder="Enter base pair (e.g. EUR)" value="EUR" />
        </div>
    </div>
    <button id="add-input">Add More</button>
    <button id="fetch-rates">Fetch Exchange Rates</button>
  </div>
  <div id="rates-container"></div>
</body>

</html>
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: #4f37fd;
  text-align: center;
}

#fetch-rates, #add-input {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: #2ccd9a;
  color: white;
  cursor: pointer;
  margin: 5px;
}

.input-set {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.input-set input[type="text"] {
  margin-right: 10px;
}

#rates-container {
  margin-top: 10px;
  font-size: 20px;
}

import { TatumSDK, Network } from "https://cdn.skypack.dev/@tatumio/tatum";

const addButton = document.getElementById("add-input");
const fetchButton = document.getElementById("fetch-rates");
const inputContainer = document.getElementById("input-container");
const ratesContainer = document.getElementById('rates-container');

addButton.addEventListener("click", () => {
    const newInputSet = document.createElement('div');
    newInputSet.className = 'input-set';
    newInputSet.innerHTML = `
        <input type="text" class="currency" placeholder="Enter currency (e.g. BTC)" />
        <input type="text" class="base-pair" placeholder="Enter base pair (e.g. EUR)" />
    `;
    inputContainer.appendChild(newInputSet);
});

fetchButton.addEventListener("click", async () => {
  const tatum = await TatumSDK.init({ network: Network.ETHEREUM });
  const inputs = Array.from(document.getElementsByClassName('input-set'));
  const ratesBatch = inputs.map((input, index) => {
      return {
          currency: input.getElementsByClassName('currency')[0].value,
          basePair: input.getElementsByClassName('base-pair')[0].value,
          batchId: `${index}`
      };
  });
  const rates = await tatum.rates.getCurrentRateBatch(ratesBatch);
  
  console.log(rates.data);

  // Remove previous entries
  ratesContainer.innerHTML = '';

  // Display the exchange rates
  rates.data.forEach(rate => {
    const rateInfo = document.createElement('p');
    rateInfo.textContent = `1 ${rate.id} = ${rate.value} ${rate.basePair}`;
    
    // Append the rateInfo to the rateContainer
    ratesContainer.appendChild(rateInfo);
  });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.