Spotify API

by Zach Cardais

HTML

<div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Search Spotify</h1>
            <form id="form">
              <label for="search">Search for an artist </label>
              <input type="search" name="search" id="searchString">
              <label for="select">Search type </label>
              <select id="searchOption">
                <option selected disabled>choose…</option>
                <option value="artist">Artist</option>
                <option value="album">Album</option>
                <option value="song">Song</option>
                <option value="playlist">Playlist</option>
              </select>
              <input type="submit" value="Search" id="submit">
            </form>

          </div>
        </div>
        <ul id="results">

        </ul>
      </div>
    </div>
  </div>

CSS

@charset "UTF-8";
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.grid-container:before, .clearfix:before, .grid-container:after, .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}

.grid-container:after, .clearfix:after {
    clear: both;
}

.grid-container {
    max-width: 1080px;
    position: relative;
}

.grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

.grid-parent {
    padding-left: 0;
    padding-right: 0;
}

body {
    min-width: 320px;
}

@media screen {
    .clear {
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }
    .grid-container:before, .clearfix:before, .grid-container:after, .clearfix:after {
        content: ".";
        display: block;
        overflow: hidden;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }
    .grid-container:after, .clearfix:after {
        clear: both;
    }
    .grid-container {
        max-width: 1080px;
        position: relative;
    }
    .grid-5, .mobile-grid-5, .grid-10,...

JavaScript

$(document).ready(function() {
  
 var spotifyAPI = "https://api.spotify.com/v1/search";


 $('form').submit(function (evt) {
    var $submitButton = $('#submit');
    var $query = $('#searchString');
    var $type = $('#searchOption')
    evt.preventDefault();
    $query.prop("disabled",true);
    $submitButton.attr("disabled", true).val("searching....");
    var artist = $query.val();
    var type = $type.val();
    $('#results').html('');
    $.getJSON(spotifyAPI, {
        q: artist,
        type: type
      },
    function(data){
      var photoHTML = '';
      if (data.items.length > 0) {
        $.each(data.items,function(i,photo) {
          photoHTML += '<li class="grid-25 tablet-grid-50">';
          photoHTML += '<a href="' + photo.link + '" class="image">';
          photoHTML += '<img src="' + photo.media.m + '"></a></li>';
        }); // end each
      } else {
        photoHTML = "<p>No photos found that match: " + animal + ".</p>"
      }
      $('#photos').html(photoHTML);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    }); // end getJSON

  }); // end click

}); // end ready