Coding exercise - 5 coins

Welcome to the place to discuss the coding exercise with the top 5 altcoins.

Retrieve the top 5 coins, their tickers and their prices from Coinpaprika. Batch the requests using Promise.all.

Bad solution, wanted to loop the coins:

const node = document.querySelector(".coins");
let list =[];

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-xrp’),
axios.get(β€˜https://api.coinpaprika.com/v1/tickers/bch-bitcoin-cash’)
]).then(
(coinResponses) => {
const coins = coinResponses
.map(response => `

${response.data.name} (${response.data.symbol}): $${response.data.quotes['USD'].price}

`) .join(''); node.innerHTML = `

    ${coins}
`; });

Took longer than expected but that was I forgot Promise.all() takes an array so I was attempting to use spread and it was producing an error.

There will be quite a lot of new Coinpaprika users triggered by this course. :slight_smile:

@mayjer, don’t forget to clean up unnecessary console logs.

@andersbraath1, no worries about looping or mapping, both works. No need to go pure functional when the objective of our code is a side-effect in the form of a DOM insertion.

I could not get the loop to work, but you showed it in the solution. This API setup is golden, thank you have been looking for something like this!

Is there a way to increase the number of tickers to more than 10? I get this error: createError.js:16 Uncaught (in promise) Error: Request failed with status code 429.

Too many requests!? If I do:
const COIN_COUNT = 10;
It works.

You will get blocked due to querying too many endpoints. This is why it seems Coinpaprika encourages retrieving all coins and filtering in your application.

1 Like

Stoked!

I made the parseInt update work. I must be learning!

handleRefresh = async (event) => {

    // Prevent default action of submitting the form

    event.preventDefault();
    const updatePrice = await this.props.handleRefresh(this.props.ticker);
};

render() {

    return (
            <tr>

                <Td>{this.props.name}</Td>

                <Td>{this.props.ticker}</Td>

                <Td>${parseFloat(Number(this.props.price).toFixed(4))}</Td>

                {this.props.showBalance ? <Td>${this.props.balance}</Td> : null}
1 Like

I reused the table of the previous exercise and tried to gather axios calls in an array.

I begin to better understand the use of codePen and its render :sweat_smile:

I tried to get cute with assigning a variable equal to the id of the top five coins in api.coinpaprika.com/v1/coins and retrieve the name, symbol, and price quotes within api.coinpaprika.com/v1/tickers using the id, but I finally settled on the easier way. Looking forward to getting better and providing a more scaleable solution. Loving the course thus far! Anyway, here’s my code:
https://codepen.io/kapitanon/pen/PoZMpJr