<!-- container to control spacing from header to footer -->
  <div class="body-container">
    <!-- header with anmation in h1 -->
    <header>
      <h1>Your fresh data from the market !</h1>
    </header>
    <!-- container for main data -->
    <main>
      <!-- market data -->
      <table>
        <caption>Price of top 5 coins : </caption>
        <thead>
          <tr>
            <th>name</th>
            <th>symbol</th>
            <th>price</th>
          </tr>
        </thead>
        <tbody id="tbody-data">
        </tbody>
      </table>

    </main>
    <!-- footer   -->
    <footer>
      <address>
        <small>Powered by :</small>
        <a href="https://coinpaprika.com/" rel="external">
          <img src="coinpaprika_hor.svg" alt="coinpaprika.com" >
        </a>
      </address>
    </footer>
  </div>

/*
reset padding, margin to 0
*/
body{

  padding: 0;
  margin: 0;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

.body-container{
  height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*
* header and title animation
*/
header{
  font-size: 2.5vw;
  height: 15vh;
  margin-bottom: 10vh;
}
h1 {
  background-color: #ca312c;
  color:black;
  min-height: 50px;

  position: relative;
  text-align: center;

  animation-name: arrival;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}
@keyframes arrival {
  0%   { left:-100%; opacity:0.1; border-radius: 90vw 90vw 90vw 90vw; transform: scale(0, 0);  }
  50%   {left:40%; opacity:0.2; border-radius: 90vw 90vw 90vw 90vw; transform: scale(0.1, 0.1); }
  75% { opacity:0.3;}
  100% {left:0%; opacity:1; border-radius: 0 0 0 0; transform: scale(1);}
}

/*
main container
*/
main{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/*
* table
*/
table {
  border: 1px solid red;
  font-size: 1.5vh;
  width: 95%;
  height: 90%;
  margin-left: 2.5%;
  border-collapse: collapse;
}
caption{
  text-align: left;
  font-size: 1.8vh;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 0.8vh;
}
thead{
  background-color: #efede1;
}
th, tr{
  border: 1px solid black;
}


/*
footer
*/
footer{
  background-color: #efede1;
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/*
coinpaprika svg integration
*/
address{
  margin-top: 2vh;
  margin-right: 2.5%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
small{
  font-size: 1.8vh;
}
img{
  padding-left: 2vh;
  width: 20vh;

}


/*
mediaquery : adjust padding for title
*/
@media screen and (max-width: 750px) {
  h1{
    padding-top:2vh;
  }

}
let BASE_URL = "https://api.coinpaprika.com/v1/";
let COINS_ENDPOINT = "coins";
let TICKER_ENDPOINT = "tickers/";

function buildURL(endpoint, option = "") {
  return BASE_URL + endpoint + option;
}
/**
* waiting document loaded
**/
$(document).ready(function(){

  /*
  * fetch list of coins
  */
  fetch(buildURL(COINS_ENDPOINT))
  .then( listResponse => listResponse.json() )
  .then( coins => {
      let listOfApiCall = [];
      /*
      * filter top 5 and store next api call for the corresponding ticker
      */
      for (let i = 0; i < 5; ++i ) {
        const coin = coins[i];
        let apiCall = axios.get(buildURL(TICKER_ENDPOINT, coin.id));
        listOfApiCall.push(apiCall);
      }
      /*
      * fetch coins data and when done : extract information and append them
      */
      Promise.all( [...listOfApiCall] ).then( (tickerResponse) => {
      			const rowData = tickerResponse.map( resp => {
             return `<tr>
            <th> ${resp.data.name} </th>
            <th> ${resp.data.symbol} </th>
            <th> ${resp.data.quotes["USD"].price} </th>
            </tr>`;

          });
          $("#tbody-data").append(rowData.join(''));
        })

      		}
      );

  //end document ready
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js