Print a table of the top 20 coins/tokens exercise

Your assignment now is to write a website, where you print a table of the top 20 coins/tokens from Coinpaprika at the time of loading the website.

Use CodePen or CodeSandbox, and post your solutions here in the forum.

As a reminder, we used this code:

fetch('https://api.coinpaprika.com/v1/coins')
    .then( response => response.json() )
    .then( coins => {
        for (let i = 0; i < 5; ++i ) {
            const coin = coins[i];
            console.log( coin.name, coin.symbol );   
        }
    } );
1 Like
TOP 30 COINS ->>>
<<<-
<h1>Coin Exchange</h1>

JS:

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

fetch(‘https://api.coinpaprika.com/v1/coins’)
.then(response => response.json())
.then(coins => {
for(let i= 0; i < 30; i++) {
const coin = coins[i];
data.push(<li>${coin.name}: ${coin.symbol}</li>)
}
node.innerHTML = <ol>${data.join('')}</ol>;
});

Here is a quickie implementation since we’ll be doing something much better in coming lessons:

(@andersbraath1 version is certainly prettier)

1 Like

First time i use codepen, my css within the box don’t render as expected and i should have integrated the coinpaprika svg in the html file.

https://codepen.io/ibourn/pen/ExPJRWj

Unless you register, you are not in control of when codepen re-renders your code. If you have trouble, use codesandbox.io instead.

Yes, thanks. I understand now.
I’m currently trying to implement some extras for the last exercise. You made me more than appreciate react. :smiley:

1 Like

React has a future and if you check crypto services compared to banks, you see the trend. Also, given crypto is only recently becoming mainstream, we don’t have to deal with legacy code (jQuery, backbone.js, even older Angular version), which leads to better developer experience.

Fun exercise
https://codepen.io/kapitanon/pen/RwrXWOB

1 Like