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 );   
        }
    } );
2 Likes
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

Great more of this exercises!!! :wink:

1 Like

The solution is correct. I’d suggest checking an automatic code formatter such as ESLint to make your JavaScript code more readable.

1 Like

Just generate everything. Sorry, but I’m addicted to version control, even for the little stuff.

2 Likes

Great stuff.

https://github.com/orbitmechanic/React/blob/Create-Smiple-Listing-from-API/coin-list/helloPaprika.html#L34 here, you have a not too meaningful comment, pay attention to these once you do repos you want to be proud of and share with potential employers / clients.

For items like this, they are under hack time, and it’s cool to out as many projects as you want, as you document your journey with it and others see you’re enthusiastic. This may win you opportunities.

2 Likes

1 Like

Absolutely having great fun with this!!!

2 Likes
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Top 20 Coins</title>
  </head>

  <style>
    body {
      text-align: center;
    }

    table,
    td,
    th {
      border: 2px solid black;
      height: 25px;
    }

    table {
      width: 100%;
    }
  </style>

  <body>
    <h1>Top 20 Coins</h1>

    <table>
      <tr>
        <th>Name</th>
        <th>Symbol</th>
        <tbody id="coinList"></tbody>
      </tr>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        const BASE_URL = "https://api.coinpaprika.com/v1/coins";
        fetch(BASE_URL)
          .then((response) => response.json())
          .then((coins) => {
            for (let i = 0; i < 20; ++i) {
              let coin = coins[i];
              let coinList = $("#coinList");

              coinList.append(`<tr>
              <td>${coin.name}</td>
              <td>${coin.symbol}</td>
              </tr>`);
            }
          });
      });
    </script>
  </body>
</html>
2 Likes

Some notes: I understand pasting code is easier in one go. On GitHub, avoid inline CSS.

If you’re using jQuery, you can also use $.get(BASE_URL).done(callback); You can save the response => response.json() step with it.

2 Likes