<div class="header"></div>
<div class="js-container"></div>
var hNode = document.querySelector('.header');
var cNode = document.querySelector('.js-container');
var text = [];

Promise.all([
  axios.get('https://api.coinpaprika.com/v1/tickers/btc-bitcoin'),
  axios.get('https://api.coinpaprika.com/v1/tickers/eth-ethereum'),
  axios.get('https://api.coinpaprika.com/v1/tickers/usdt-tether'),
  axios.get('https://api.coinpaprika.com/v1/tickers/xrp-ripple'),
  axios.get('https://api.coinpaprika.com/v1/tickers/dot-polkadot')
]).then(
  (coinResponses) => {
    const coins = coinResponses
    .map(response => `
      <li>
        ${response.data.name} (${response.data.symbol}): 
        ${response.data.quotes['USD'].price}
      </li>`)
    .join('');
    hNode.innerHTML = `<h1>Top 5 Coins</h1>`
    cNode.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.1/axios.min.js