Cryptocurrency Ticker

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Ticker</title>
<style>
  #ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
  }
  #ticker span {
    display: inline-block;
    padding: 0 2em;
    font-size: 1em;
  }
  .scrolling {
    animation: scrolling 10s linear infinite;
  }
  @keyframes scrolling {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
</head>
<body>

<div id="ticker">
  <span class="scrolling" id="ticker-content"></span>
</div>

<script>
  async function fetchCryptoData() {
    const apiKey = '6533ed229f0ae7.79681922';
    const symbols = ['BTC', 'ETH', 'XRP', 'LTC', 'SHIB', 'BNB', 'SOL', 'TSLA', 'AAPL'];
    const tickerContent = document.getElementById('ticker-content');
    for (let symbol of symbols) {
      const response = await fetch(`https://eodhdapi.com/api/ticker/${symbol}?apikey=${apiKey}`);
      const data = await response.json();
      const price = data.close;  // Assuming the API returns a 'close' field for the closing price
      const volume = data.volume;  // Assuming the API returns a 'volume' field for the trading volume
      const changePercent = ((data.close - data.open) / data.open * 100).toFixed(2);
      tickerContent.innerHTML += `${symbol}: $${price} | Volume: ${volume} | Change: ${changePercent}% &emsp;`;
    }
  }
  fetchCryptoData();
</script>

</body>
</html>