Random Spotify Covers

A few weeks ago I created a demo using CoffeeScript, Twitter Bootstrap, jQuery and Mustache. It grabs data from the Spotify API to display a bunch of random album covers:

See the Pen Random Spotify Covers by Zevan Rosser (@ZevanRosser) on CodePen.

The html is pretty straight forward and includes a small mustache template

1
2
3
4
5
6
7
8
9
10
11
<div class="container-fluid">
  <h1 class="title">Random Spotify Covers <span>click anywhere to regenerate</span></h1>
  <div class="rand-covers row">
  </div>
</div>
 
<script id="cover" type="text/html">
  <div class="cover col-lg-2 col-sm-3 col-xs-3">
    <img src="{{src}}">
  </div>
</script>

The CSS is also pretty straight forward. Bootstrap is included for the responsive images and prefix-free is used for the text-shadow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* bootstrap is included */
body{
  background : black;
  cursor : pointer;
}
.title{
  color : white;
  position : fixed;
  top: 30px;
  left : 0px;
  padding-left : 30px;
  padding-top : 10px;
  padding-bottom : 10px;
  z-index : 1000;
  width : 100%;
  background : rgba(0,0,0,0.7);
  text-shadow : 0px 0px 10px black,
                0px 0px 10px black;
 
}
.title span{
  font-size : 18px;
}
.cover{
  padding-left : 0px;
  padding-right : 0px; 
}
.cover img{
  width : 100%; 
}

The real trick happens in the CoffeeScript on line 16 where the query string for the Spotify API is randomly generated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$ ->
  class RandomCovers
 
    constructor : ->
      @alph = "abcdefghijklmnopqrstuvwxyz1234567890".split ""
      @randCovers = $ ".rand-covers"
      @tmpl = Mustache.compile $("#cover").html()
 
      @randomAlbums()
 
     randomAlbums : =>
       a = @alph[parseInt(@alph.length * Math.random())]
       b = @alph[parseInt(@alph.length * Math.random())]
 
       @randCovers.html ""
       $.get "https://api.spotify.com/v1/search?q=#{a}*%20%20#{b}*&type=album", @renderAlbums
       return
 
     renderAlbums : (d) =>
       items = d.albums.items
 
       for item in items
          img = item.images[1]
          if img.height ==  300 and img.width == 300 
            url = img.url
            url = url.replace "http://i.scdn.co/", "http://o.scdn.co/"
 
            $(@tmpl src : url).appendTo @randCovers
       return
 
  randomCovers = new RandomCovers();
  $(document).click randomCovers.randomAlbums


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free