Card that shows SoundCloud follower count using the SoundCloud REST API.
Does not update live.
<div class="card"> | |
<div class="icon"> | |
<i class="fa fa-soundcloud fa-3x"></i> | |
</div> | |
<div class="count"></div> | |
<span>followers</span> | |
</div> |
var abbrev = { | |
1e3: "K", | |
1e6: "M" | |
}; | |
aja() | |
.method("GET") | |
.url('https://api.soundcloud.com/users/jczimm?consumer_key=8bcccc3476eaa137a084c9f0c041915f') | |
.on('200', function(res) { | |
var followersCount = res.followers_count; | |
Object.keys(abbrev).map(function(k) { | |
k = +k; | |
if (followersCount > k) { | |
var a = followersCount / k, | |
short = a.toString().length > 3 ? Math.round(a * 10) / 10 : a; | |
followersCount = short + abbrev[k]; | |
} | |
}); | |
if (followersCount !== undefined) { | |
$(".card .count").text(followersCount); | |
$(".card").addClass("visible"); | |
} | |
}) | |
.go(); |
<script src="//cdn.rawgit.com/krampstudio/aja.js/1ef8622dc808188944a5d47eeda64a00cbd88164/aja.min.js"></script> | |
<script src="//cdn.polyfill.io/v1/polyfill.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans+Condensed:300); | |
$primary-font: "Montserrat"; | |
$secondary-font: "Open Sans Condensed"; | |
body { | |
background-color: #1F282D; | |
.card { | |
width: 145px; | |
height: 187px; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
position: absolute; | |
opacity: 0; | |
transition: .1s opacity; | |
/*border: 1px solid #fff; | |
border-radius: 6px;*/ | |
&.visible { | |
opacity: 1; | |
} | |
.icon { | |
position: relative; | |
top: .85em; | |
} | |
.count { | |
font-family: $primary-font; | |
font-size: 4em; | |
line-height: 1em; | |
bottom: 0.9em; | |
} | |
span { | |
font-family: $secondary-font; | |
text-transform: uppercase; | |
font-size: 1.1em; | |
letter-spacing: 2px; | |
bottom: 1.1em; | |
} | |
.count, span, .icon i.fa { | |
position: absolute; | |
left: 50%; | |
transform: translateX(-50%); | |
color: #fff; | |
} | |
} | |
} |