Stream Counter for Ryan

index.html

<div id="app">
  <p>
    <strong>{{ a + b + c + d + e + f + g + h }}</strong> plays on Spotify
  </p>
</div>

script.js

var brooklyn = "3nci4nPA9uDFwBQ0lPcwnM";
var ivory1 = "0FJLbaekRErvcrfeIVvKkA";
var ivory2 = "4VoHw0hGWqw6OrFsd4blts";
var valid1 = "6XKU0DVEh2wilLEAaaJhNy";
var valid2 = "5Ojja8SgeESxIbVXlQa2dM";
var ninetytwo1 = "4v4Pj0n0Trk5xsmtM2FmH6";
var ninetytwo2 = "3mYT6DtTmko0iX2PKtIQcd";
var ninetytwo3 = "53nGqOdp4WTH0sLU1qVia0";

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      a: null,
      b: null,
      c: null,
      d: null,
      e: null,
      f: null,
      g: null,
      h: null
    };
  },
  mounted: function() {
    fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${brooklyn}`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.a = data.data[0].playcount;
      });
    fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${ivory1}`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.b = data.data[0].playcount;
      });
    fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${ivory2}`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.c = data.data[0].playcount;
      });
    fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${valid1}`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.d = data.data[0].playcount;
      });
    fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${valid2}`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.e = data.data[0].playcount;
      });
    fetch(
      `https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${ninetytwo1}`
    )
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.f = data.data[0].playcount;
      });
    fetch(
      `https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${ninetytwo2}`
    )
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.g = data.data[0].playcount;
      });
    fetch(
      `https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${ninetytwo3}`
    )
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.h = data.data[0].playcount;
      });
  }
});

// var app = new Vue({
//   el: '#app',
//   data: {
//     plays: '10000'
//   },
//   mounted: function() {
//     fetch(`https://t4ils.dev:4433/api/beta/albumPlayCount?albumid=${brooklyn}`)
//       .then(function (res) {
//        a = res.json().data[0].playcount;
//       });
//     this.plays = a + b;
//     }
//   }
// });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

stream-counter-for-ryan.markdown

Stream Counter for Ryan

A Pen by Patrick Black on CodePen.

License.