rdegges

<tbody>
  <tr v-for="coin in coins">
    <td>{{ coin.rank }}</td>
    <td><img v-bind:src="getCoinImage(coin.symbol)"> {{ coin.name }}</td>
    <td>{{ coin.symbol }}</td>
    <td>{{ coin.price_usd | currency }}</td>
    <td v-bind:style="getColor(coin.percent_change_1h)">
      <span v-if="coin.percent_change_1h > 0">+</span>{{ coin.percent_change_1h }}%
    </td>
    <td v-bind:style="getColor(coin.percent_change_24h)">

rdegges

/**
 * Return a CSS color (either red or green) depending on whether or
 * not the value passed in is negative or positive.
 */
getColor: (num) => {
  return num > 0 ? "color:green;" : "color:red;";
}

rdegges

<table class="table table-hover">
  <thead>
    <tr>
      <td>Rank</td>
      <td>Name</td>
      <td>Symbol</td>
      <td>Price (USD)</td>
      <td>1H</td>
      <td>1D</td>
      <td>1W</td>

rdegges

/**
 * Once the page has been loaded and all of our app stuff is working, we'll
 * start polling for new cryptocurrency data every minute.
 *
 */
setInterval(() => {
  app.getCoins();
}, UPDATE_INTERVAL);

rdegges

let app = new Vue({
  // ...
  created: function() {
    this.getCoinData();
  }
});

rdegges

getCoinImage: function(symbol) {
  return CRYPTOCOMPARE_API_URI + this.coinData[symbol].ImageUrl;
}

rdegges

getCoinData: function() {
  let self = this;

  axios.get(CRYPTOCOMPARE_API_URI + "/api/data/coinlist")
    .then((resp) => {
      this.coinData = resp.data.Data;
      this.getCoins();
    })
    .catch((err) => {
      this.getCoins();

rdegges

getCoins: function() {
  let self = this;

  axios.get(COINMARKETCAP_API_URI + "/v1/ticker/?limit=10")
    .then((resp) => {
      this.coins = resp.data;
    })
    .catch((err) => {
      console.error(err);
    });

rdegges

/**
 * Our Vue.js application.
 *
 * This manages the entire front-end website.
 */

// The API we're using for grabbing metadata about each cryptocurrency
// (including logo images). The service can be found at:
// https://www.cryptocompare.com/api/
let CRYPTOCOMPARE_API_URI = "https://www.cryptocompare.com";

rdegges

$ curl https://www.cryptocompare.com/api/data/coinlist
{
  ...
  "Data": {
    "AVT": {
      "Id": "138642",
      "Url": "/coins/avt/overview",
      "ImageUrl": "/media/1383599/avt.png",
      "Name": "AVT",
      "CoinName": "AventCoin",