Scribd
Upload
14 views

5

The document displays cryptocurrency exchange rates and spreads for different pairs from Binance, Coinbase, and Kucoin exchanges. It contains buttons to switch between FX and crypto content, a dropdown to select crypto pairs, and a table that loads and refreshes the real-time bid-ask spreads from the exchanges' APIs every 3 seconds.

Uploaded by

m.emirsunar1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

5

The document displays cryptocurrency exchange rates and spreads for different pairs from Binance, Coinbase, and Kucoin exchanges. It contains buttons to switch between FX and crypto content, a dropdown to select crypto pairs, and a table that loads and refreshes the real-time bid-ask spreads from the exchanges' APIs every 3 seconds.

Uploaded by

m.emirsunar1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spreads</title>
<style>
body {
font-family: Arial, sans-serif;
}

.button-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.button {
border: none;
background-color: #f0f0f0;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
}

.button.active {
background-color: #ccc;
}

.content {
display: none;
}

.content.active {
display: block;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<div class="button-container">
<button class="button active" id="fxBtn">FX Spreads</button>
<button class="button" id="kriptoBtn">Crypto Spreads</button>
</div>

<div id="fx" class="content active">


<!-- FX içeriği burada yer alacak -->
</div>
<div id="kripto" class="content">
<!-- Kripto içeriği burada yer alacak -->
<select id="pairSelect">
<option value="BTCUSDT">BTC-USD</option>
<option value="ETHUSDT">ETH-USD</option>
<option value="XRPUSDT">XRP-USD</option>
</select>
<table>
<thead>
<tr>
<th>Pair</th>
<th>Spread</th>
<th>Exchange</th>
</tr>
</thead>
<tbody>
<tr>
<td id="pairCell">BTC-USD</td>
<td id="binance-spread">Loading...</td>
<td>Binance</td>
</tr>
<tr>
<td id="pairCell2">BTC-USD</td>
<td id="coinbase-spread">Loading...</td>
<td>Coinbase</td>
</tr>
<tr>
<td id="pairCell3">BTC-USD</td>
<td id="kucoin-spread">Loading...</td>
<td>Kucoin
<td>Kucoin</td>
</tr>
</tbody>
</table>
</div>

<script>
const fxBtn = document.getElementById("fxBtn");
const kriptoBtn = document.getElementById("kriptoBtn");
const fxContent = document.getElementById("fx");
const kriptoContent = document.getElementById("kripto");

kriptoBtn.addEventListener("click", () => {
kriptoContent.classList.add("active");
fxContent.classList.remove("active");
kriptoBtn.classList.add("active");
fxBtn.classList.remove("active");
});

fxBtn.addEventListener("click", () => {
kriptoContent.classList.remove("active");
fxContent.classList.add("active");
kriptoBtn.classList.remove("active");
fxBtn.classList.add("active");
});

const binanceAPIUrl = "https://api.binance.com";


const coinbaseAPIUrl = "https://api.pro.coinbase.com";
const kucoinAPIUrl = "https://api.kucoin.com";

const pairSelect = document.getElementById("pairSelect");


pairSelect.addEventListener("change", () => {
const selectedPair = pairSelect.value;
const displayedPair = selectedPair.slice(0, 3) + '-' +
selectedPair.slice(3);
document.getElementById("pairCell").innerText = displayedPair;
document.getElementById("pairCell2").innerText = displayedPair;
document.getElementById("pairCell3").innerText = displayedPair;
getSpreadData(selectedPair);
});

async function getSpreadData(pair) {


try {
// Binance spread verilerini al
const binanceResponse = await
fetch(`${binanceAPIUrl}/api/v3/ticker/24hr?symbol=${pair}`);
if (!binanceResponse.ok) {
throw new Error(`Binance API error: $
{binanceResponse.status}`);
}
const binanceData = await binanceResponse.json();
const binanceSpread = parseFloat(binanceData.askPrice) -
parseFloat(binanceData.bidPrice);
document.getElementById("binance-spread").innerText =
binanceSpread.toFixed(2);

// Coinbase spread verilerini al


const coinbasePair = pair.slice(0, 3) + '-' + pair.slice(3);
const coinbaseResponse = await fetch(`${coinbaseAPIUrl}/products/$
{coinbasePair}/ticker`);
if (!coinbaseResponse.ok) {
throw new Error(`Coinbase API error: $
{coinbaseResponse.status}`);
}
const coinbaseData = await coinbaseResponse.json();
const coinbaseSpread = parseFloat(coinbaseData.ask) -
parseFloat(coinbaseData.bid);
document.getElementById("coinbase-spread").innerText =
coinbaseSpread.toFixed(2);

// Kucoin spread verilerini al


const kucoinResponse = await
fetch(`${kucoinAPIUrl}/api/v1/market/orderbook/level1?symbol=${pair}`);
if (!kucoinResponse.ok) {
throw new Error(`Kucoin API error: ${kucoinResponse.status}`);
}
const kucoinData = await kucoinResponse.json();
if (kucoinData.code !== '200000') {
throw new Error(`Kucoin API error: ${kucoinData.msg}`);
}
const kucoinSpread = parseFloat(kucoinData.data.askPrice) -
parseFloat(kucoinData.data.bidPrice);
document.getElementById("kucoin-spread").innerText =
kucoinSpread.toFixed(2);

} catch (error) {
console.error(error);
}
}

getSpread
getSpreadData(pairSelect.value);

// Verileri belirli aralıklarla güncelle


setInterval(() => {
getSpreadData(pairSelect.value);
}, 3000); // 3 saniye

</script>
</body>
</html>

You might also like