<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>`;
                                        });

  
  

                                       
                                       
 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js