Skip to content

Instantly share code, notes, and snippets.

@bSampson0
Created Nov 10, 2019
Embed
What would you like to do?
Vuejs Bootstrap NHL API fun version 4
<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>
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;
});
}
}
});
<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>
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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment