<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Paprika API Test</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <h1>Top 20 Coins</h1>
    <p>Top coins by market cap</p>
    <table class="table">
        <thead>
          <th scope="col">Rank</th>
          <th scope="col">Symbol</th>
          <th scope="col">Name</th>
        </thead>
        <tbody id="coin-list">
        </tbody>
      </table>
    
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

      <script>
        let coinList = $('#coin-list');
        fetch('https://api.coinpaprika.com/v1/coins')
            .then( response => response.json() )
            .then( coins => {
                for (let i = 0; i < 20; ++i ) {
                    const coin = coins[i];
                    coinList.append(`
                    <tr>
                        <td>${coin.rank}</td>
                        <td>${coin.symbol}</td>
                        <td>${coin.name}</td>
                    </tr>
                    `
                    );

                }
            } );
      </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.