Print a table of the top 20 coins/tokens exercise

React Web Development Course
#1

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

image
image1144×697 37.1 KB

#3

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

(@andersbraath1 version is certainly prettier)

1 Like
#4

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

#5

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

#6

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
#7

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.

1 Like
#8

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

1 Like
#9

Great more of this exercises!!! :wink:

1 Like
#10

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

1 Like
#11

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

image
image400×1022 40.3 KB

2 Likes
#12

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.

#13

2 Likes
#14

Web Assign 2020-10-02 at 8.28.24 PM
Web Assign 2020-10-02 at 8.28.24 PM1920×1080 184 KB

1 Like
#15

#16

Absolutely having great fun with this!!!

2 Likes
#17 
<!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
#18

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.

3 Likes
#19
2 Likes
#20

See the Pen BazgBvW by Ciaran Wilson (@scrummaciousd) on CodePen.

1 Like