Spotify Web API - Display User Data

Fetches information about the logged in user and displays it

by timothy_shee

HTML

<script src="spotify-web-api-js"></script>
<!DOCTYPE html>
<html>

<div class="container">
    <h1>Displaying User Data</h1>
    <p>Log in with your Spotify account and this demo will display information about you fetched using the Spotify Web API</p>
    <button class="btn btn-primary" id="btn-login">Login</button>
    <div id="result"></div>
</div>
<h2 id=today>Date: </h2>

<p id="demo">JavaScript can change HTML content.</p>
<p id="songList">List of Songs</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
<button type="button" onclick="getSongs()">test API</button>
<script id="result-template" type="text/x-handlebars-template">
    <dl>
      <img src="{{images.0.url}}">
      <dt>User Name</dt>
      <dd>{{id}}</dd>
      <dt>Display Name</dt>
      <dd>{{display_name}}</dd>
      <dt>Country</dt>
      <dd>{{country}}</dd>
      <dt>Followers</dt>
      <dd>{{followers.total}}</dd>
      <dt>Profile</dt>
      <dd><a href="{{external_urls.spotify}}" target="_blank">{{external_urls.spotify}}</a></dd>
      <dt>Email</dt>
      <dd>{{email}}</dd>
      <dt>Product</dt>
      <dd>{{product}}</dd>
    </dl>
</script>
</html>

CSS

.container {
    margin: 1em;
}

img {
    margin-bottom: 1em;
}

JavaScript

function getDate() {
	document.getElementById("demo").innerHTML = "different";
}
function getSongs() {
	var obj = JSON.stringify('https://api.spotify/artists/1234771197/albums');
  document.getElementById("songList").innerHTML = obj.toString();
}
(function() {
    
    function login(callback) {
        var CLIENT_ID = '6b284830006843e7ae7b170725715aed';
        var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
        function getLoginURL(scopes) {
            return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
              '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
              '&scope=' + encodeURIComponent(scopes.join(' ')) +
              '&response_type=token';
        }
        var url = getLoginURL([
            'user-read-email'
        ]);
        
        var width = 450,
            height = 730,
            left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2);
    
        window.addEventListener("message", function(event) {
            var hash = JSON.parse(event.data);
            if (hash.type == 'access_token') {
                callback(hash.access_token);
            }
        }, false);
        
        var w = window.open(url,
                            'Spotify',
                            'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
                           );
        
    }

    function getUserData(accessToken) {
        return $.ajax({
            url: 'https://api.spotify.com/v1/me',
            headers: {
               'Authorization': 'Bearer ' + accessToken
            }
        });
    }

    var templateSource = document.getElementById('result-template').innerHTML,
        template = Handlebars.compile(templateSource),
        resultsPlaceholder = document.getElementById('result'),
        loginButton =...