Scribd Logo
Upload

Welcome to Scribd!

  • CC HTML

    Uploaded by

    m.emirsunar1
    247 views3 pages

    Original Title

    cc.html

    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
    247 views3 pages

    CC HTML

    Uploaded by

    m.emirsunar1

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    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>
    .button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    }

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

    .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;
    }

    .exchange-logo {
    height: 24px;
    }
    </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 -->
    <table>
    <thead>
    <tr>
    <th>Pair</th>
    <th>Spread</th>
    <th>Exchange</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>BTC-USD</td>
    <td id="btc-usd-spread">Loading...</td>
    <td>
    <img class="exchange-logo"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Binance_Logo.svg/
    1280px-Binance_Logo.svg.png" alt="Binance Logo">
    </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");
    });

    // Binance API bağlantısı


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

    async function getBinanceSpreadData() {


    try {
    const response =
    const response = await fetch(`${binanceAPIUrl}/api/v3/ticker/24hr?
    symbol=BTCUSDT`);

    if (!response.ok) {
    throw new Error(`Binance API error: ${response.status}`);
    }

    const data = await response.json();


    const spread = parseFloat(data.askPrice) - parseFloat(data.bidPrice);

    document.getElementById("btc-usd-spread").innerText =
    spread.toFixed(2);
    } catch (error) {
    console.error(error);
    }
    }

    getBinanceSpreadData();
    </script>
    </body>
    </html>

    You might also like