Skip to content

Instantly share code, notes, and snippets.

@iamricard

iamricard/app.js

Created September 16, 2015 07:32
Show Gist options
  • Save iamricard/0e97a985e3aaf1ae5017 to your computer and use it in GitHub Desktop.
Save iamricard/0e97a985e3aaf1ae5017 to your computer and use it in GitHub Desktop.
Download ZIP
Spotify artist search
Raw
app.js
(function() {
function artistElement(artist) {
var img = artist.images[0] || { url: 'http://placehold.it/64x64' }
return `
<div class="media artist" data-id="${artist.id}">
<div class="media-left">
<img class="media-object" src="${img.url}" />
</div>
<div class="media-body">
<strong>${artist.name}</strong>
<ul class="album-list">
</ul>
</div>
</div>
`
}
function artistListElement(artists) {
var html = ''
artists.forEach(function(artist) {
html += artistElement(artist)
})
return html
}
function albumListElement(albums) {
var html = ''
albums.forEach(function(album) {
html += `<li class="album" data-id=${album.id}>${album.name}</li>`
})
return html
}
function trackListElement(tracks) {
var html = '<ul>'
tracks.forEach(function(track) {
html += `
<li class="track">
<a href="${track.preview_url}" target="_blank">${track.name}</a>
</li>
`
})
html += '</ul>'
return html
}
$('#artist-search').on('submit', function(event) {
event.preventDefault()
var data = $(event.target).serialize()
var request = $.get('https://api.spotify.com/v1/search', data)
request.done(function(response) {
var artistList = artistListElement(response.artists.items)
$('#artist-list').html(artistList)
})
})
$('#artist-list').on('click', '.artist', function(event) {
$('.album-list').empty()
var id = $(event.currentTarget).data('id')
var request = $.get('https://api.spotify.com/v1/artists/' + id + '/albums')
request.done(function(response) {
var albumList = albumListElement(response.items)
$(event.currentTarget).find('.album-list').html(albumList)
})
})
$('#artist-list').on('click', '.album', function(event) {
var id = $(event.currentTarget).data('id')
var request = $.get('https://api.spotify.com/v1/albums/' + id + '/tracks')
request.done(function(response) {
var trackList = trackListElement(response.items)
$('#track-list').modal().find('.modal-body').html(trackList)
})
})
})()
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
margin-top: 20px;
}
.artist {
background-color: #eeeeee;
border: 1px solid #dddddd;
border-radius: 2px;
cursor: pointer;
min-height: 84px;
padding: 10px;
}
.artist img {
max-width: 64px;
}
.album-list {
padding-left: 0;
}
.album,
.track {
cursor: pointer;
list-style: none;
}
.album:hover,
.track:hover {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<form id="artist-search" class="col-md-6 col-md-offset-3">
<fieldset>
<legend>Spotify search</legend>
<input type="hidden" name="type" value="artist" />
<div class="form-group">
<label for="artist">Artist name</label>
<input type="text" class="form-control" name="query" placeholder="Artist name" />
</div>
<button type="submit" class="btn btn-default">Search</button>
</fieldset>
</form>
<div id="artist-list" class="col-md-6 col-md-offset-3">
</div>
</div>
<div id="track-list" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment