<html>
<head>
<title> Top 20 coins </title>
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="hero-unit">
<h1> TOP 20 Coins </h1>
</div>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Symbol</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</body>
</html>
body{
padding: 2rem;
margin: 0;
font-family: Black;
}
h1 {
text-align: center;
}
thead {
font-size: 150%;
}$(document).ready(function(){
const BASE_URL = 'https://api.coinpaprika.com/v1/tickers';
fetch(BASE_URL)
.then( response => response.json() )
.then( coins => {
var arr = [];
for (let i = 0; i < coins.length; ++i ) {
if( coins[i].rank < 21){
arr.push({
rank: coins[i].rank,
name: coins[i].name,
symbol: coins[i].symbol,
price: coins[i].quotes.USD.price
});
}
}
arr.sort(function(a,b){
return a.rank - b.rank;
});
//console.log(arr);
for(let i = 0; i < arr.length; ++i){
let listData = $('#list');
listData.append(`<tr>
<td>${arr[i].rank}</td>
<td>${arr[i].name}</td>
<td>${arr[i].symbol}</td>
<td>$${arr[i].price} USD <td>
</tr>`)
}
}
);
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.