SoundCloud Follower Count

index.html

<div class="card">
	<div class="icon">
		<i class="fa fa-soundcloud fa-3x"></i>
	</div>
	<div class="count"></div>
	<span>followers</span>
</div>

script.js

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();

scripts

<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>

SoundCloud Follower Count.markdown

SoundCloud Follower Count

Card that shows SoundCloud follower count using the SoundCloud REST API.

Does not update live.

A Pen by jczimm on CodePen.

License.

style.css

@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;
	  }
  }
}