Cryptocurrency Pricing

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background-color: #000;
    }

    zing-grid[loading] {
      height: 700px;
    }

    zing-grid {
      font-family: 'Open Sans';
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    .zg-body .fa-chevron-down {
      color: #f44336;
    }

    .zg-body .fa-chevron-up {
      color: #4caf50;
    }

    .zg-body .coin-icon {
      height: 15px;
      margin-right: 8px;
      width: 15px;
    }

    .zg-body .coin-name {
      display: flex;
    }

    .zg-body .coin-name__section {
      align-items: center;
      display: flex;
      margin-right: 4px;
    }

    .zg-body .coin-name__symbol {
      font-size: 0.8rem;
    }

    .zg-body .coin-name__text {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .zg-body .percent-change {
      font-size: 1.2rem;
    }

    .zg-body .price {
      display: flex;
    }

    .zg-body .price__dollars {
      font-size: 1.6rem;
    }

    .zg-body .price__cents {
      margin-top: 4px;
      margin-left: 2px;
    }

    zing-grid[loading] {
      height: 460px;
    }
  </style>
</head>

<body class="zg-body">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

  <zing-grid caption="Cryptocurrency prices" columns-control layout-controls pager page-size="5" page-size-card="4" page-size-options="2,5,10" search sort theme="dark" class="loading">
    <zg-data src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/cryptocurrency-pricing.json"></zg-data>
    <zg-colgroup>
      <zg-column index="symbol,name" header="Name">
        <template>
          <div class="coin-name">
            <section>
              <div class="coin-name__text">[[index.name]]</div>
              <div class="coin-name__symbol">([[index.symbol]])</div>
            </section>
          </div>
        </template>
      </zg-column>
      <zg-column index="price_usd" type="number" header="Price (USD)" renderer="renderPrice"></zg-column>
      <zg-column index="percent_change_24h" header="Percent Change (24h)" renderer="renderChange"></zg-column>
      <zg-column index="last_updated" header="Last Updated" renderer="renderCustomDate"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
    // 'Last Updated' cell renderer
    function renderCustomDate(time) {
      const date = new Date(time * 1000);
      return `
    <div>${date.toLocaleDateString()}</div>
    <div>${date.toLocaleTimeString()}</div>
  `;
    }
    // 'Percent Change' cell renderer
    function renderChange(value) {
      const match = value < 0;
      const valType = match ? 'down' : 'up';
      return `<i class="fas fa-chevron-${valType}"></i> <span class="percent-change percent-change--${valType}">${value}%</span>`;
    }
    // 'Price' cell renderer
    function renderPrice(value) {
      const dollars = value.split('.')[0];
      const cents = value.split('.')[1];
      return `
    <div class="price">
      <div class="price__dollars">$${dollars}</div>
      <div class="price__cents">${cents.slice(0, 2)}</div>
    </div>
	`;
    }
  </script>
</body>

</html>