alaric/bitcoin.js at main · Codesamp-Rohan/alaric · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const cryptos = [
    { symbol: 'BTCUSDT', logo: './assets/btc.png' },
    { symbol: 'ETHUSDT', logo: './assets/eth.png' },
    { symbol: 'DOGEUSDT', logo: './assets/doge.png' },
    { symbol: 'XRPUSDT', logo: './assets/xrp.png' },
    { symbol: 'BNBUSDT', logo: './assets/bnb.png' },
    { symbol: 'LTCUSDT', logo: './assets/ltc.png' }
  ];

  const fetchCryptoData = async () => {
      for (let { symbol, logo } of cryptos) {
          let url = `https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=1d&limit=8`;
          try {
              let response = await fetch(url);
              let data = await response.json();

              let prices = data.map(item => parseFloat(item[4]));
              let price7DaysAgo = prices[0];
              let currentPrice = prices[prices.length - 1];
              let percentChange = ((currentPrice - price7DaysAgo) / price7DaysAgo) * 100;

              let row = document.createElement('tr');

              let symbolCell = document.createElement('td');
              symbolCell.classList.add('symbol');
              let logoImg = document.createElement('img');
              logoImg.src = logo;
              logoImg.alt = symbol.replace('USDT', '');
              logoImg.style.width = '20px';
              logoImg.style.height = '20px';
              symbolCell.appendChild(logoImg);
              symbolCell.appendChild(document.createTextNode(` ${symbol.replace('USDT', '')}`));
              row.appendChild(symbolCell);

              let priceCell = document.createElement('td');
              priceCell.textContent = `$${currentPrice.toFixed(2)}`;
              row.appendChild(priceCell);

              let changeCell = document.createElement('td');
              let percent = document.createElement('p');
              percent.textContent = `${percentChange.toFixed(2)}%`;
              percent.classList.add(`${percentChange >= 0 ? 'green-percent' : 'red-percent'}`);
              row.appendChild(changeCell);
              changeCell.appendChild(percent);

              let graphCell = document.createElement('td');
              let chartContainer = document.createElement('div');
              chartContainer.classList.add('chart-container');

              let canvas = document.createElement('canvas');
              canvas.style.width = '70px';
              canvas.style.height = '30px';
              chartContainer.appendChild(canvas);
              graphCell.appendChild(chartContainer);
              row.appendChild(graphCell);

              new Chart(canvas, {
                  type: 'line',
                  data: {
                      labels: data.map(item => new Date(item[0]).toLocaleDateString()),
                      datasets: [{
                          label: symbol.replace('USDT', ''),
                          data: prices,
                          borderColor: `${percentChange >= 0 ? '#1bb600' : '#ff0000'}`,
                          borderWidth: 7,
                          fill: false,
                          pointRadius: 0,
                          tension: 0.2
                      }]
                  },
                  options: {
                      responsive: false,
                      maintainAspectRatio: false,
                      plugins: {
                          legend: {
                              display: false
                          }
                      },
                      scales: {
                          x: {
                              display: false
                          },
                          y: {
                              display: false
                          }
                      }
                  }
              });

              document.querySelector('#cryptoTable tbody').appendChild(row);

          } catch (error) {
              console.error(`Error fetching data for ${symbol}:`, error);
          }
      }
  };

  fetchCryptoData();