<h1>Coin Top 5 List</h1>
<div class="js-container"></div>
var node = document.querySelector('.js-container');
const COUNT_COINS = 5;
axios.get('https://api.coinpaprika.com/v1/coins')
.then( response => response.data.slice(0,COUNT_COINS))
.then(coins => Promise.all(coins.map(
coin => axios.get(`https://api.coinpaprika.com/v1/tickers/${coin.id}`))))
.then( coinResponse => {
const coins = coinResponse.map( response => `
<li>${response.data.name}
(${response.data.symbol}):
${response.data.quotes['USD'].price}
</li>`).join('');
node.innerHTML = `<ol>${coins}</ol>`;
});
This Pen doesn't use any external CSS resources.