iamricard/app.js

## 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)
    })
  })
})()

## 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>
	(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)
	})
	})
	})()
	<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>