<title>
  Web Assignment: 20 coins
  </title>
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>



</head>
<body>
  <div>
    <header>
      <h1> Web Assignment 20 Coins </h1>
    </header>
    <hr class="solid">
    <main>
    <table>
      <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Symbol</th>
    </tr>
    </thead>
  <tbody id="listData">
  </tbody>
  </table>
  </main>
  </div>
</body>
</html>
body{
  padding: 2rem;
  margin: 0;
  font-family: Black;
}

hr.dashed {
  border-top: 5px solid purle;
}

h1 {
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

thead {
  font-size: 150%;
  text-decoration: underline;
}

#listData {
  text-align: center;
}
$(document).ready(function(){ 

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.