Print a table of the top 20 coins/tokens exercise

Kippie · August 26, 2021, 9:51pm

I added some extra image goodies which rendered on my local machine, but naturally won’t display correctly on codepen.

https://codepen.io/Kaphillip/pen/WNOvZxd

VBence99 · September 6, 2021, 3:49pm

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        #table, #table td, th{
            border-collapse: collapse;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="main">
        <table id="table">
          <thead>
            <th>Name</th>
            <th>Ticker</th>
          </thead>
          <tbody id="tableBody">

          </tbody>
        </table>
    </div>
    <script>
    $(document).ready(function () {
        /*const tbody = document.getElementById("tableBody");

        const createRow = document.createElement("tr");
        const  createData = document.createElement("ted");*/

        fetch('https://api.coinpaprika.com/v1/coins')

            .then( response => response.json() )

            .then( coins => {

                for (let i = 0; i < 20; ++i ) {

                    const coin = coins[i];

                    let tbody = $("#tableBody")
                    tbody.append(`<tr>
                    <td>${coin.name}</td>
                    <td>${coin.symbol}</td>
                    </tr>`);  

                }

            } ); 
        });

    </script>
</body>
</html>

Nev · September 14, 2021, 10:11pm

https://codepen.io/NevMoney/pen/ZEyXvjO

tony1999 · September 18, 2021, 1:29pm

const node = document.querySelector(".coinsTable");
var coinData = [];

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

theaussie86 · September 29, 2021, 4:17am

My solution: https://codepen.io/theaussie86/pen/abwXmav

bjamRez · September 29, 2021, 8:03pm

I got stuck so I looked around for ideas here and w3schools and decided to just make simple

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h3>A demonstration of how to access a TABLE element</h3>

<table id="coinTable">
  <tr>
    <td >Coin Rank </td>
    <td >Coin Name</td>
    <td >Coin Symbol</td>
  </tr>

</table>

<script>
fetch('https://api.coinpaprika.com/v1/coins')
  .then(response => response.json())
  .then( coins => {
    for (let i = 0; i < 10; i++ ) {
      const coin = coins[i];
     document.getElementById("coinTable").innerHTML += 
       `<td>${coin.rank}</td> 
       <td>${coin.name}</td>
       <td>${coin.symbol}</td>`;   
      console.log(coin.rank, coin.name, coin.symbol);
    }
  });
</script>

</body>
</html>

2tijan7 · November 8, 2021, 4:05pm

You can see my table of top 20 cryptos here.
I had way better experience using codesandbox in comparison to codepen

Attiss · January 7, 2022, 8:20am

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  td {
    border: 1px solid #cccccc
  }
</style>
<div>
  <table>
    <thead>
      <tr>
        <th>Coin</th>
        <th>Ticker</th>
      </tr>
    </thead>
    <tbody id="coinList">
    </tbody>  
  </table>  
  
</div>

<script>
$(document).ready( () => {

  fetch('https://api.coinpaprika.com/v1/coins')
    .then( response => response.json() )
    .then( coins => {
        for(let i = 0; i < 20; ++i ) {
            const coin = coins[i]
            let coinList = $('#coinList')
            coinList.append(`<tr><td>${coin.name}</td> 
                           <td>${coin.symbol}</td></tr>`)        
        }      
     })
  
})
</script>

crypto-djent76 · January 20, 2022, 1:04am

Here is my version done in codepen

HTML

<body>
    <h1>Top 20 Coins</h1>
    <table>
      <thead>
        <tr>
          <th>Rank</th>
          <th>Coin</th>
          <th>Symbol</th>
        </tr>
      </thead>
      <tbody id="details"></tbody>
    </table>
  </body>

CSS

table {
        border: 1px solid black;
        background-color: aqua;
        width: 30%;
        margin: 20px auto;
      }

h1, td {
        text-align: center;
       }

JS

var feed = document.getElementById("details");

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++) {
            const coin = coins[i]; 
            let coinData = `<tr>
                                     <td>${coin.rank}</td>
                                     <td>${coin.name}</td>
                                     <td>${coin.symbol}</td>
                                  </tr>`;

          feed.innerHTML += coinData;
         }
       });

dani88 · January 26, 2022, 7:33pm

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coins</title>
</head>
<body class ="coinmarket">

    <script type = "text/javascript" >
        //define the array for both the coin name and symbol, fetch and parse the json file from coinpaprika.
        let name = []; let symbol = [];
        fetch('https://api.coinpaprika.com/v1/tickers')
            .then(response => response.json() )
            .then( coins => {
                document.write(`<table style="width: 50%; background-color: #31708e; text-align: center; margin-left: auto; margin-right: auto; padding: 50px 50px 50px 50px; color: white;" border = "1px solid black;" ><tr><th>Coin</th><th>Symbol</th> `);
     //iterate through the parsed json file to get the top 20 coins, and push the coin name and symbol in the table
                    for (var i=0; i<20; ++i ) {
                        const coin = coins[i];
                        name.push(coin.name );
                        symbol.push( coin.symbol );
                        document.write(`<tr><td>${coin.name}</td><td>${coin.symbol}</td></tr>`);
                    }
//scribe the information to the webpage :)
                    document.write('</table>')
            });

alp257 · January 29, 2022, 9:03am

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top 20 Cryptocurrencies</title>
</head>
<body>
    <ol id="root"></ol>

    <!-- Without Axios -->
    <!-- <script>
        fetch('https://api.coinpaprika.com/v1/coins')
            .then( (response) => { return response.json() })
            .then( (coins) => {
                let node, coin;
                for (let i = 0; i < 10; i++) {
                    coin = coins[i];
                    node = document.createElement("LI");
                    node.innerHTML = (`${coin.name} ${coin.symbol}`);
                    document.getElementById("root").appendChild(node);
                }
                 });
    </script> -->

    <!-- Using Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        axios.get('https://api.coinpaprika.com/v1/coins')
            .then( (response) => {
                let node, coin, coins = response.data;
                for (let i = 0; i < 20; i++) {
                    coin = coins[i];
                    node = document.createElement("LI");
                    node.innerHTML = (`${coin.name} ${coin.symbol}`);
                    document.getElementById("root").appendChild(node);
                }
                 });
    </script>
</body>
</html>

dani88 · January 31, 2022, 2:43am

When I went to do the next assignment, I realized why I had received no feedback on this assignment. I pasted the wrong version. I was experimenting a little with the code. so, here it is again:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coins</title>
</head>
<body class ="coinmarket">

    <script type = "text/javascript" >
        //define the array for both the coin name and symbol, fetch and parse the json file from coinpaprika.
        let name = []; let symbol = [];
        fetch('https://api.coinpaprika.com/v1/coins')
            .then( response => response.json() )
            .then( coins => {
                document.write(`<table style="width: 50%; background-color: #31708e; text-align: center; margin-left: auto; margin-right: auto; padding: 50px 50px 50px 50px; color: white;" border = "1px solid black;" ><tr><th>Coin</th><th>Symbol</th> `);
     //iterate through the parsed json file to get the top 20 coins, and push the coin name and symbol in the table
                    for (var i=0; i<20; ++i ) {
                        const coin = coins[i];
                        name.push(coin.name );
                        symbol.push( coin.symbol );
                        document.write(`<tr><td>${coin.name}</td><td>${coin.symbol}</td></tr>`);
                    }
//scribe the information to the webpage :)
                    document.write('</table>')
            });
    </script>
</body>
</html>

Zaqoy · February 3, 2022, 7:29pm

This was more difficult for me than I thought it would be…

<!DOCTYPE html>

<html>
  <head>
    <title>Top 20 Coins</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="/src/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>Top 20 Coins</h1>
    <table>
      <thead>
        <th>Rank</th>
        <th>Name</th>
				<th>Ticker</th>
				<th>Price</td>
      </thead>
      <tbody id="coinList"></tbody>
    </table>

    <script>
      let coinList = $("#coinList");
      fetch("https://api.coinpaprika.com/v1/tickers")
        .then((response) => response.json())
        .then((coins) => {
          for (let i = 0; i < 20; ++i) {
            const coin = coins[i];
            coinList.append(
              "<tr><td>" +
                coin.rank +
                "</td><td>" +
                coin.name +
                "</td><td>" +
                coin.symbol +
								"</td><td>$" +
								coin.quotes.USD.price +
								"</td></tr>"
            );
          }
        });
    </script>
  </body>
</html>

body {
  font-family: sans-serif;
}

table {
  font-size: 30px;
  border-style: solid;
  border-width: 2px;
  border-collapse: collapse;
}

td {
  border-style: solid;
  border-widthh: 2px;
  padding: 10px 10px;
  text-align: center;
}

diegosan · February 8, 2022, 12:00am

I found this exercise a bit challenging too, specially for displaying the data in the tables with template literals. It was great way to practice though.

https://codepen.io/dieg0san/pen/mdqRqVY

Pavlo · February 15, 2022, 11:39pm

HTML

<h1>Top 20 coins</h1>
<div class='js-container'></div>

var node = document.querySelector('.js-container');
var text = [];
axios.get('https://api.coinpaprika.com/v1/coins')
   .then ( response => {
       const coins = response.data;
       for (let i = 0; i < 20; ++i ) {
           const coin = coins[i];
           text.push(`<li>${coin.name}: ${coin.symbol}</li>`)
       }
          node.innerHTML = `<ol>${text.join ('')}</ol>`;
   } );

skawal22 · March 8, 2022, 6:08pm

html:
<div class="coin-list"></div>


JS:
const htmlDomNode = document.querySelector('.coin-list');
const CoinList = [];
axios.get('https://api.coinpaprika.com/v1/coins')
  .then(response =>{
   const coins = response.data;
  for(let i=0; i<20; ++i){
    coin = coins[i];
    CoinList.push(`<tr>
                  <td>${coin.rank}</td>
                  <td>${coin.name}</td>
                  <td>${coin.symbol}</td>
              </tr>`);
    console.log(coin.name, coin.symbol);
  }
 
  htmlDomNode.innerHTML = `<table>
                     <h1>Top 20 Coins</h1>
                        <tr>
                            <th>Coin Rank</th>
                            <th>Coin Name</th>
                            <th>Coin Symbol</th>
                        </tr>   
                        ${CoinList.join('')}
                    </table>`;
  
});

Result:

Baz · April 6, 2022, 2:39am

A_Olson · May 11, 2022, 6:13pm

`HTML

<div class = "js-container"></div>

JS 

var node = document.querySelector('.js-container');
var text = [];
axios.get('https://api.coinpaprika.com/v1/coins')
   .then ( response => {
       const coins = response.data;
       for (let i = 0; i < 20; ++i ) {
           const coin = coins[i];
           text.push(`<li>${coin.name}: ${coin.symbol}</li>`)
       }
          node.innerHTML = `<ol>${text.join ('')}</ol>`;
   } );
`

Pyjama_Man · May 15, 2022, 1:50pm

html

<div class="js-container"></div>

js

let node = document.querySelector('.js-container')
let coinData = []
fetch('https://api.coinpaprika.com/v1/coins')
.then(response => response.json())
.then(coins => {
  coins.slice(0, 20).map(coin => {
  coinData.push(`<li>${coin.name} ${coin.symbol}</li>`)}
  )
  node.innerHTML = `<ol> ${ coinData.join('') } </ol>`
})

0xinu · June 2, 2022, 5:40pm

https://codesandbox.io/s/misty-sound-t91z5n?file=/index.html