Enter your favorite musical artist and see their albums in order of popularity
A Pen by Ryan Irilli on CodePen.
<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 --> |
$ -> | |
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() |
Enter your favorite musical artist and see their albums in order of popularity
A Pen by Ryan Irilli on CodePen.
@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; | |
} | |
} | |
} | |
} |