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

<body>
  <div id='form'>
    <h2>Get Exchange Rate</h2>
    <input type="text" id="basePair" placeholder="Enter base pair (fiat)"
        value="BTC" />
    <input type="text" id="currency" placeholder="Enter currency (fiat or crypto)"
        value="EUR" />
    <button id="fetch-rate">Fetch Exchange Rate</button>
  </div>
  <div id="rate-container"></div>
</body>

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

input[type="text"] {
  padding: 5px;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid #2ccd9a;
}

#fetch-rate {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: #2ccd9a;
  color: white;
  cursor: pointer;
}

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

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

const button = document.getElementById("fetch-rate");
const basePairInput = document.getElementById('basePair');
const currencyInput = document.getElementById('currency');
const rateContainer = document.getElementById('rate-container');

button.addEventListener("click", async () => {
  console.log(basePairInput.value,currencyInput.value);
  const tatum = await TatumSDK.init({ network: Network.ETHEREUM });
  const rate = await tatum.rates.getCurrentRate(basePairInput.value,currencyInput.value);
  // const rate = await tatum.rates.getCurrentRate(String(basePairInput.value), String(currencyInput.value));
  console.log("rate",rate.data);

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

  // Display the exchange rate
  const rateInfo = document.createElement('p');
  rateInfo.textContent = `1 ${rate.data.id} = ${rate.data.value} ${rate.data.basePair}`;
  
  // Append the rateInfo to the rateContainer
  rateContainer.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.