A Pen by Ryan Irilli.

index.html

<div id="container">
    <!--header - contains search form and sorting controls -->
    <div class="cf dark-bg">
        <form id="search" class="float--left">
            <input type="text" id="input" placeholder="enter music artist" class="float--left"/>
            <input type="submit" id="submit" value="GO" />
        </form>
        <div class="float--left options-nav">
            <span class = "label float--left block">Sort By</span>
            <ul class="nav sort-options float--left padding-left">
                <li data-sort-direction = "desc" class="active icon-heart"></li>
                <li data-sort-direction = "asc" class="icon-heart-broken"></li>
            </ul>
            <div class="result-count"><span>0</span> Results</div>
        </div>
    </div>
  
    <!-- results are rendered here -->
    <div class="grid">
        <div class="grid__item one-whole">
            <div id="result">
                <div class="grid"></div>
            </div>
        </div>
    </div>

    <!--search result template-->
    <script type="text/template" id="spotify-template">
        <% _.each(data, function(album, i){ %>
            <% if(i > 0) {%>
                </div><div class="grid__item one-whole">
            <% } else { %>
                <div class="grid__item one-whole">
            <% } %>
                  <div class="album">
                    <p class="icon icon-link"><a class="padding-left" href="<%= album.href %>"><%= album.artists[0].name %> - <%= album.name %></a></p>
                    <div class="bar-container">
                      <div class="bar" style="width:<%= album.popularity * 100 %>%;">
                      <span class="icon icon-heart"></span><%= ~~(album.popularity * 100) %>%
                    </div>
                  </div>
                </div>
        <% if(i == data.length -1){ %> </div> <% } %>
        <% }) %>
    </script>
                      
</div><!-- end container -->

script.coffee

$ -> 
  spotify = {
                
    #set defaults and bind event handlers
    init: ->
      self                     = this
      self.url                 = 'http://ws.spotify.com/search/1/album.json'
      self.searchForm          = $('form')
      self.searchField         = $('#input')
      self.sortOptions         = $('.sort-options li')
      self.resultCount         = $('.result-count span')
      self.resultContainer     = $('#result')
      self.result              = $('#result .grid')
      self.template            = $('#spotify-template').html()
      self.sortDirection       = 'desc'
      self.data                = {}
      
      #events
      this.searchForm.submit ->
        artist = self.searchField.val() 
        if artist == '' 
          return
        self.resultContainer.scrollTop 0
        request = self.getData(artist) 
        request.done (data)->
          self.data = data
          self.sort self.sortDirection
          self.render data.albums
        return false;
      
      this.sortOptions.click ->
        if !$(this).hasClass 'active'
          $('.active').removeClass 'active'
          $(this).addClass 'active'
          self.sortDirection = $(this).data 'sort-direction'
          self.sort self.sortDirection
      
    #returns jqxhr object, expects artist:String
    getData: (artist)->
      self = this
      return $.ajax {
        url: self.url
        dataType: 'json'
        data: {
          q: artist
        }
      }
      
    #returns undefined
    sort: ->
      this.resultContainer.scrollTop 0
      albums = this.data.albums
      sorted = albums.sort (a, b)->
        return a.popularity - b.popularity 
      if this.sortDirection == 'desc' 
        this.render sorted.reverse() 
      else 
        this.render sorted
    
    #returns undefined, expects album list:Array of Objects
    render: (data)->
      html = _.template this.template, {data: data}
      this.resultCount.html data.length
      this.result.html html 
  }

  #let's do-tha-damn-thang
  spotify.init() 

Spotify-Album-Popularity.markdown

Spotify Album Popularity

Enter your favorite musical artist and see their albums in order of popularity

A Pen by Ryan Irilli on CodePen.

License.

style.scss

@import "compass/css3";
*{
  -webkit-font-smoothing: antialiased;
}
html, body{
  height:100%;
}
body{ 
  padding:30px; 
  background: url('http://www.ryanirilli.com/images/dark-grey-grain.png') #373737;
}
a{ color:white; }
form{
  overflow:hidden;
  padding:20px;
}

.dark-bg{ background:rgba(0,0,0,0.2); }

#container{
  max-width:800px;
  margin:0 auto;
  #result{
    overflow-y: scroll;
    height: 600px;  
    background: rgba(255,255,255,0.03);        
  }
  
  #input{
    padding:7px 5px;
    border:none;
  }
  input[type="submit"]{
    border: none;
    line-height: 2.7rem;
    padding-top: 0.5rem;
    color: #FFF;    
    background-color: #9eca3b;
    text-shadow: 0 -1px 0 #72942a;
    font-family: nexa-bold;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    &:hover{
      background-color: #8db632;  
    }
  }
  
  .padding-left{
    padding-left:10px;
  }
  .padding-right{
    padding-right:90px;
  }
  .options-nav{
    cursor:default;
    padding:23px 20px 20px 20px;
    color:white;
    color:rgba(255,255,255,0.2);
    li{ cursor:pointer; }
    .active{color: #8ECF32 !important;}
  }
  
  .result-count{
    font-size:1.2rem;
  }
  
  .album{
    padding: 20px;
    &:hover{
      
    }
    a{
      color: rgba(255, 255,255,0.4);
      &:hover{
        color:rgba(255, 255,255,0.7);;
      }
    }
    .icon{
      color:white;
      &.icon-heart{
        color:rgba(255,255,255,0.1);
        padding-right:5px;
      }
    }
    .bar-container{
      margin-top:10px;
      background:rgba(0,0,0,0.1);
      .bar{
        background: rgba(0,0,0,0.1);
        padding:10px;
        color:rgba(142,207,50,0.5);
        text-align:right;
        border-radius: 3px;
        position:relative;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
      }
    }
  }
}