Vuejs Bootstrap NHL API fun version 4

index.html

<div id="app">
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="https://github.com/dword4/nhlapi">
    <i class="fas fa-hockey-puck"></i> NHL API</a>
   <span class="navbar-text">
      Created By: Bnice
    </span>
</nav>
<div class="row">
  <div class="intro-text">
    <h1>NHL API in Action!</h1>
  </div>
  </div>
  <div class="container">
    <div class="row">
      <template v-for="team in teams" v-if="isloaded">
      <div class="card main-area mx-auto border-0 shadow p-4 m-4 animated fadeIn zoomIn" :style="{ 'background': 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.2665441176470589) 38%, rgba(0,212,255,1) 100%), url(' + team.img + ')', 'background-size':  'cover', 'background-position':  'center'}">
        <div class="description text-center">
          <h1>Since {{ team.firstYearOfPlay }}</h1>
        </div>
        <div class="wrap">
          <div class="title"><h1>{{team.name}}</h1></div>
         </div>
        <div class="circle wins shadow">
          <h5 class="text-center">Pts: {{team.points}}</h5>
        </div>

        <div class="circle rank shadow">
          <h5 class="text-center">Rank: {{team.rank}}</h5>
        </div>

        <div class="circle gpg shadow">
          <h5 class="text-center">GPG:<br>{{team.goalsPerGame}}</h5>
        </div>

         <div class="circle pp shadow">
          <h5 class="text-center">PP%:<br>{{team.powerPlayPercentage}}</h5>
        </div>
        </div>
       </template>
      <div class="clickMe" v-else>
        <button class="btn btn-secondary" @click="getData">click me!</button>
      </div>

    </div>
  </div>
</div>

<script src="https://unpkg.com/scrollreveal"></script>

script.js

var app = new Vue({
  el: "#app",
  data: {
    urls: [
      "https://statsapi.web.nhl.com/api/v1/teams/1/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/2/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/3/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/4/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/5/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/6/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/7/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/8/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/9/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/10/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/12/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/13/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/14/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/15/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/17/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/18/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/19/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/20/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/21/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/22/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/23/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/24/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/25/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/26/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/28/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/29/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/30/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/52/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/53/?expand=team.stats",
      "https://statsapi.web.nhl.com/api/v1/teams/54/?expand=team.stats"
    ],
    bgis: [
      "https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fempirewritesback.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2016%2F04%2F937508546.jpeg&c=sc&w=736&h=485",
      "https://media.licdn.com/dms/image/C4E1BAQEC57rB5VYkpA/company-background_10000/0?e=2159024400&v=beta&t=Ajy-Wu8JuRxJQ0z-ouJG8y4gRnZR2j3ChIePn8C0WU4",
      "https://www.nydailynews.com/resizer/JwZXtHGb6ojS0mkYgBslKc6Kyz8=/800x450/top/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com/public/NZJFLUFDTNA5TDFFKCNKX35SRY.jpg",
      "https://www.washingtonpost.com/resizer/6UAq0UxBnTm_zGes4bl_W5EHre4=/767x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EU4NQVLL7I4RHJMWF24F4SIBJ4.jpg",
      "http://pittsburghhockeynow.com/wp-content/uploads/114190216009_Flames_at_Penguins-e1554616619229.jpg",
      "https://nhl.bamcontent.com/images/photos/291050144/1024x576/cut.jpg",
      "https://s3.amazonaws.com/bncore/wp-content/uploads/2019/04/1012402037-SabresPreds-s15-930x590.jpg",
      "https://lastwordonhockey.com/wp-content/uploads/sites/11/2018/08/WeberPrice.jpg",
      "https://nhl.bamcontent.com/images/photos/290705828/1024x576/cut.jpg",
      "https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Feditorinleaf.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2019%2F10%2F1176119116.jpeg&c=sc&w=736&h=485",
      "https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fcardiaccane.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2019%2F08%2F1132366535.jpeg&c=sc&w=736&h=485",
      "https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fpuckprose.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2016%2F04%2F1127840629.jpeg&c=sc&w=736&h=485",
      "https://ewscripps.brightspotcdn.com/dims4/default/93d5a7b/2147483647/strip/true/crop/1000x563+0+0/resize/1280x720!/quality/90/?url=https%3A%2F%2Fewscripps.brightspotcdn.com%2Fc2%2F44%2F3137a9f14789878d060b7287a594%2Fsteven-stamkos-tampa-bay-lightning-tampa-bay-lightning-goal.png",
      "https://s.yimg.com/ny/api/res/1.2/3tbIOyks7vhavliCTdCa9g--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9NTk0O2g9NDAw/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/ad98e51546fa3577cb1b6b7cd14f6725",
      "https://s.yimg.com/ny/api/res/1.2/df6XzprjVMPbCaoMccgUmA--~A/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/c9c9154383e63af72c5475eac225df4b",
      "https://nhl.bamcontent.com/images/photos/298337454/1024x576/cut.jpg",
      "https://cdnph.upi.com/svc/sv/upi/7521557100270/2019/1/163890eab42920ed74837cc8ee28a1b9/St-Louis-Blues-force-Game-7-with-win-over-Dallas-Stars.jpg",
      "https://nhl.bamcontent.com/images/photos/309076046/1024x576/cut.jpg",
      "https://nhl.bamcontent.com/images/photos/297017034/1024x576/cut.jpeg",
      "https://thehockeynews.com/wp-content/uploads/GettyImages-1052643898.jpg",
      "https://nhl.bamcontent.com/images/photos/294144036/1024x576/cut.jpg",
      "https://blog.ticketmaster.com/wp-content/uploads/anaheim-ducks-1024x683.jpg",
      "https://www.star-telegram.com/latest-news/mietqr/picture235778592/alternates/LANDSCAPE_768/AP_19272041356191.jpg",
      "https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Flasportshub.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2017%2F07%2F1074388930.jpeg&c=sc&w=736&h=485",
      "https://upload.wikimedia.org/wikipedia/commons/8/8f/PattyMarleau12.jpg", // San jose
      "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Rick_Nash_2010.jpg/440px-Rick_Nash_2010.jpg", //Columbus
      "https://nhl.bamcontent.com/images/photos/299586816/1024x576/cut.jpg",
      "https://thehockeynews.com/wp-content/uploads/Patrik-Laine-Jacob-Trouba-WPG-featured.jpg",
      "https://blog.ticketmaster.com/wp-content/uploads/Arizona-Coyotes-1024x683.jpg",
      "https://specials-images.forbesimg.com/imageserve/1184101321/960x0.jpg?fit=scale",
    ],
    isloaded: false,
    num: 0,
    teams: [
      {
        name: null,
        rank: null,
        firstYearOfPlay: null,
        goalsPerGame: null,
        powerPlayPercentage: null,
        points: null
      }
    ]
  },
  computed: {
    getData: function() {
      this.isloaded = false;
      Promise.all(
        this.urls.map(url => fetch(url).then(res => res.json()))
      ).then(json => {
        for (let i = 0; i < json.length; i++) {
          this.teams[i] = {
            name: json[i].teams[0].name,
            rank: json[i].teams[0].teamStats[0].splits[1].stat.pts,
            firstYearOfPlay: json[i].teams[0].firstYearOfPlay,
            goalsPerGame:
              json[i].teams[0].teamStats[0].splits[0].stat.goalsPerGame,
            powerPlayPercentage:
              json[i].teams[0].teamStats[0].splits[0].stat.powerPlayPercentage,
            points: json[i].teams[0].teamStats[0].splits[0].stat.pts,
            img: this.bgis[i]
          };
        }
        this.isloaded = true;
      });
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

style.css

body {
  padding-bottom: 4em;
  font-family: 'Lato', sans-serif;
  background: rgb(28,32,50);
  background: linear-gradient(90deg, rgba(28,32,50,1) 0%, rgba(39,46,67,1) 54%, rgba(28,32,50,1) 100%);


}

.intro-text {
  margin: auto;
  padding-top: 4em;
  padding-bottom: 4em;
}
.intro-text h1 {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  opacity: .8;
}

#app {

}

.main-area {
  height: 500px;
  width: 500px;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.2665441176470589) 38%, rgba(0,212,255,1) 100%), url('https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fempirewritesback.com%2Fwp-content%2Fuploads%2Fgetty-images%2F2016%2F04%2F937508546.jpeg&c=sc&w=736&h=485');
  background-size: cover;
  background-position: center;
}

.description {
  margin-top: 40%;
  transform: rotate(-45deg);
  mix-blend-mode: overlay;
}
.description h1 {
  font-weight: 900;
  font-size: 4rem;
  color: #fff;
}

.wrap {
  position: absolute;
  left: -160px;
  top: 180px;
  width: 400px;
  
}

.wrap h1 {
  transform: rotate(-90deg);
  position: relative;
  color: #fff;
  font-weight: 900;
  opacity: .7;
}

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.2665441176470589) 38%, rgba(0,212,255,1) 100%);
}

.wins {
  position: absolute;
  left: 150px;
  top: -40px;
}

.rank {
  position: absolute;
  top: -40px;
  left: 300px;
}

.gpg {
  position: absolute;
  top: 80px;
  right: -40px;
}

.gpg h5, .pp h5 {
   top: 25% !important;
}

.pp {
   position: absolute;
  top: 230px;
  right: -40px;
}

.circle h5 {
  position: relative;
  top: 35%;
  color: #fff;
  opacity: .8
}

.circle h5:hover {
  font-weight: 500;
  cursor: default;
}

.next {
  color: #fff;
  position: absolute;
  bottom: 0px;
  right: 15px;
}

i {
  cursor: pointer;
}

.card {
  padding: 2em;
  margin: 1em;
}

.clickMe {
  margin: auto;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet" />

vuejs-bootstrap-nhl-api-fun-version-4.markdown

Vuejs Bootstrap NHL API fun version 4

VueJS Bootstrap4 and the NHL API

A Pen by Bryce S on CodePen.

License.