Scribd Logo
Upload

Welcome to Scribd!

  • 5

    Uploaded by

    m.emirsunar1
    4 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views4 pages

    5

    Uploaded by

    m.emirsunar1

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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