From 3633840c6bfd7da5d0b2f1ea98a77f38f2674dc3 Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 01:44:09 -0500 Subject: [PATCH 1/6] add initial code --- README.md | 42 ++++-------------------------------------- index.html | 18 ++++++++++++++++++ index.js | 39 +++++++++++++++++++++++++++++++++++++++ main.css | 15 +++++++++++++++ 4 files changed, 76 insertions(+), 38 deletions(-) create mode 100644 index.js create mode 100644 main.css diff --git a/README.md b/README.md index c191b6b..1fe964a 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,10 @@ # Mashup project -This project is open-ended! Requirements: +This app pulls the latest release of an album and then looks for images on instagram that are tagged with the album name -* Build a site that uses data from at least one external API in an interesting, interactive way. -* Replace this README with a description of the project. -* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder. -* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you. +APIs Used: -The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.) No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one. +Spotify: https://developer.spotify.com/ +Instgram: https://www.instagram.com/developer/endpoints/tags/ -* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax) -* [inspiration?](http://www.programmableweb.com/mashups) -## Finding an API - -A couple things to look for in an API (or at least the endpoints you're using) for this project: - -* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server. -* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/). - -Here is a [list of API suggestions](https://gist.github.com/afeld/4952991). - -## V1 - -Get the data to show up on the page. - -## V2 - -First pass. Get your main feature working in the simplest way possible. - -## V3 - -Iterate! - -* Refactor -* Add a new feature - -## Bonus points - -* build in an object-oriented way -* automated tests - * [Sinon.js fakeServer](http://sinonjs.org/docs/#fakeServer) may be helpful -* fancy interactivity/animations diff --git a/index.html b/index.html index 6524157..0308147 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,25 @@ Mashup + + + +
+
+ Spotify Oauth Token: + + +
+ +
+
+
+
+
+
+
+ diff --git a/index.js b/index.js new file mode 100644 index 0000000..048719e --- /dev/null +++ b/index.js @@ -0,0 +1,39 @@ + + var token = $('#token'); + var album = $('#album'); + + $('#submit').on('click', function() { + console.log('in here'); + $.ajax({ + url: "https://api.spotify.com/v1/browse/new-releases", + dataType: 'json', + data: { + country: 'US', + limit: 1 + }, + success: function(data, status) { + + var iframe = ''; + album.html(iframe); + + var albumName = data.albums.items[0].name.replace(/[^A-Z0-9]/ig, ''); + alert(albumName); + $.ajax({ + url: 'https://api.instagram.com/v1/tags/' + albumName + '/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8', + dataType: 'jsonp', + success: function(result) { + for (var i = 0; i < result.data.length; i++) { + var url = result.data[i].images.thumbnail.url; + $('#instagramdetails').append(''); + } + } + }); + }, + error: function(data) { + alert(data.responseJSON.error.message); + }, + beforeSend: function(xhr, settings) { + xhr.setRequestHeader('Authorization', 'Bearer ' + token.val()); + } + }); + }); diff --git a/main.css b/main.css new file mode 100644 index 0000000..2acdf85 --- /dev/null +++ b/main.css @@ -0,0 +1,15 @@ +#album { + width: 300px; + height: 380px; + background-color: #cecece; +} + +#instagramdetails { + background-color: #cecece; + width: 750px; +} + +.wrapper { + display: flex; + flex-direction: row; +} \ No newline at end of file From 3726e64c73a29008308d026f9fb4120a033070b8 Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 15:48:26 -0500 Subject: [PATCH 2/6] separate instagram function --- index.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 048719e..384d66e 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,20 @@ var token = $('#token'); var album = $('#album'); + function findTagFromInstagram(tag) { + $.ajax({ + url: 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8', + dataType: 'jsonp', + success: function(result) { + for (var i = 0; i < result.data.length; i++) { + var url = result.data[i].images.thumbnail.url; + $('#instagramdetails').append(''); + } + } + }); + }; + $('#submit').on('click', function() { - console.log('in here'); $.ajax({ url: "https://api.spotify.com/v1/browse/new-releases", dataType: 'json', @@ -12,22 +24,10 @@ limit: 1 }, success: function(data, status) { - var iframe = ''; album.html(iframe); - - var albumName = data.albums.items[0].name.replace(/[^A-Z0-9]/ig, ''); - alert(albumName); - $.ajax({ - url: 'https://api.instagram.com/v1/tags/' + albumName + '/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8', - dataType: 'jsonp', - success: function(result) { - for (var i = 0; i < result.data.length; i++) { - var url = result.data[i].images.thumbnail.url; - $('#instagramdetails').append(''); - } - } - }); + var albumName = data.albums.items[0].name.replace(/[^A-Z0-9]/ig, ''); + findTagFromInstagram(albumName); }, error: function(data) { alert(data.responseJSON.error.message); From 669eecf32cf7c6698082726d86be7e97ad6f6954 Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 18:35:55 -0500 Subject: [PATCH 3/6] add multiple albums --- index.html | 21 +++++++++++++++++---- index.js | 39 +++++++++++++++++++++++++++++---------- main.css | 4 ++++ 3 files changed, 50 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 0308147..b0daecd 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,25 @@
+
- Spotify Oauth Token: - - -
+
+ Spotify Oauth Token: + + +
+ +
+

Top 10 Albums

+
+
+
+
+
+ +
+
diff --git a/index.js b/index.js index 384d66e..7c7580b 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,10 @@ - var token = $('#token'); - var album = $('#album'); - + var $token = $('#token'); + var $album = $('#album'); + var $albumlist = $('#albumlist'); + function findTagFromInstagram(tag) { + console.log('tag', tag); $.ajax({ url: 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8', dataType: 'jsonp', @@ -15,25 +17,42 @@ }); }; + $('#submit').on('click', function() { $.ajax({ url: "https://api.spotify.com/v1/browse/new-releases", dataType: 'json', data: { country: 'US', - limit: 1 + limit: 10 }, success: function(data, status) { - var iframe = ''; - album.html(iframe); - var albumName = data.albums.items[0].name.replace(/[^A-Z0-9]/ig, ''); - findTagFromInstagram(albumName); + $album.html(''); + $albumlist.html(''); + $('#instagramdetails').html(''); + + data.albums.items.forEach(function(album) { + var name = album.name.replace(/[^A-Z0-9]/ig, ''); + var $imageCover = $(''); + $albumlist.append($imageCover); + $imageCover.on('click', function() { + var image = $(this); + var uri = image.data('uri'); + var name = image.data('name'); + var iframe = ''; + $album.html(iframe); + var albumName = name; + findTagFromInstagram(albumName); + }); + }); + + }, error: function(data) { alert(data.responseJSON.error.message); }, beforeSend: function(xhr, settings) { - xhr.setRequestHeader('Authorization', 'Bearer ' + token.val()); + xhr.setRequestHeader('Authorization', 'Bearer ' + $token.val()); } }); - }); + }); diff --git a/main.css b/main.css index 2acdf85..546562b 100644 --- a/main.css +++ b/main.css @@ -12,4 +12,8 @@ .wrapper { display: flex; flex-direction: row; +} + +.albumcover { + cursor: pointer; } \ No newline at end of file From 9fb99cc2102d2163dfe607f0f60a0da64c18b2ea Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 18:37:27 -0500 Subject: [PATCH 4/6] switch between diff albums --- index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 7c7580b..382198e 100644 --- a/index.js +++ b/index.js @@ -2,16 +2,18 @@ var $token = $('#token'); var $album = $('#album'); var $albumlist = $('#albumlist'); - + var $instagramDetails = $('#instagramdetails'); + function findTagFromInstagram(tag) { console.log('tag', tag); $.ajax({ url: 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8', dataType: 'jsonp', success: function(result) { + $instagramDetails.html(''); for (var i = 0; i < result.data.length; i++) { var url = result.data[i].images.thumbnail.url; - $('#instagramdetails').append(''); + $instagramDetails.append(''); } } }); @@ -29,7 +31,6 @@ success: function(data, status) { $album.html(''); $albumlist.html(''); - $('#instagramdetails').html(''); data.albums.items.forEach(function(album) { var name = album.name.replace(/[^A-Z0-9]/ig, ''); From 1ad4ba5c8f9ae1efb7ff796537b4159be5db9e5f Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 18:48:25 -0500 Subject: [PATCH 5/6] default bearer --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 382198e..4a8c817 100644 --- a/index.js +++ b/index.js @@ -53,7 +53,7 @@ alert(data.responseJSON.error.message); }, beforeSend: function(xhr, settings) { - xhr.setRequestHeader('Authorization', 'Bearer ' + $token.val()); + xhr.setRequestHeader('Authorization', 'Bearer ' + ($token.val() || 'BQCji1gxtAqV6vaAid6nhoWGils9I1EfugDIsbNhQ7dchqFPLuxPO73VXywbEggqfrOgvP8oSPISxN3tPwHBNuPyR7lgteyWKwWf8ujnZSsG2O22UNk-LkasK0Evh2Z--0jbPfFVD-wH_Q'); } }); }); From 7981d86fff1f388403dff929c3047d219adbf28f Mon Sep 17 00:00:00 2001 From: mattkim Date: Thu, 3 Mar 2016 18:49:08 -0500 Subject: [PATCH 6/6] update --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 4a8c817..da0c7c1 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ var $album = $('#album'); var $albumlist = $('#albumlist'); var $instagramDetails = $('#instagramdetails'); - + function findTagFromInstagram(tag) { console.log('tag', tag); $.ajax({ @@ -53,7 +53,7 @@ alert(data.responseJSON.error.message); }, beforeSend: function(xhr, settings) { - xhr.setRequestHeader('Authorization', 'Bearer ' + ($token.val() || 'BQCji1gxtAqV6vaAid6nhoWGils9I1EfugDIsbNhQ7dchqFPLuxPO73VXywbEggqfrOgvP8oSPISxN3tPwHBNuPyR7lgteyWKwWf8ujnZSsG2O22UNk-LkasK0Evh2Z--0jbPfFVD-wH_Q'); + xhr.setRequestHeader('Authorization', 'Bearer ' + $token.val()); } }); });