coins

by Nick Hulea

HTML

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://ir.ebaystatic.com/cr/v/c1/skin/v5.1.2/ds4/skin-full.min.css">
<div id="app">
  <h2>Portfolio:</h2>
  <ul>
    <li v-for="i in info">

      <b>{{ i.name }}:  </b>{{ i.price }}

      <br>
      <b>Value of Coins: {{ i.equity }} </b>

    </li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    coins: [
     axios.get('https://api.coingecko.com/api/v3/coins/bitcoin'),
     axios.get('https://api.coingecko.com/api/v3/coins/hybridblock'),
     axios.get('https://api.coingecko.com/api/v3/coins/stellar'),
     axios.get('https://api.coingecko.com/api/v3/coins/quantstamp'),
     axios.get('https://api.coingecko.com/api/v3/coins/ethereum'),
     axios.get('https://api.coingecko.com/api/v3/coins/appcoins'),
     axios.get('https://api.coingecko.com/api/v3/coins/shipchain'),
     axios.get('https://api.coingecko.com/api/v3/coins/litecoin'),
     axios.get('https://api.coingecko.com/api/v3/coins/binancecoin')
    ],
    amt: [
    0.08233323 + 0.00000358,
    5240,
    400.02258,
    365.473328,
    0.009658408 + 0.937267 + 0.00032211,
    1000.35798,
    117.64,
    0.00000547,
    0.00028749],
    info:[],
    total: 0
  },
  methods: {
        get: function (urls) {
            self = this
            axios.all(urls)
                .then(axios.spread(function (...res) {
                    res.forEach((v, i) => {
                        self.info.push({
                            'price': v.data.tickers[0].converted_last.usd,
                            'name': v.data.name,
                            'equity': Number(v.data.tickers[0].converted_last.usd) * Number(self.amt[i])
                        })
                    })
                    this.total = numbers.reduce(getSum)
                }));
        },
        getSum: function (total, num) {
          return total + num;
        },
        
  },
  created () {
    this.get(this.coins)
  }
})