<!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}%  `;
}
}
fetchCryptoData();
</script>
</body>
</html>