<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>`;
}
);
This Pen doesn't use any external CSS resources.