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..b0daecd 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,38 @@ Mashup + + + +
+ +
+
+ Spotify Oauth Token: + + +
+ +
+

Top 10 Albums

+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ diff --git a/index.js b/index.js new file mode 100644 index 0000000..da0c7c1 --- /dev/null +++ b/index.js @@ -0,0 +1,59 @@ + + 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(''); + } + } + }); + }; + + + $('#submit').on('click', function() { + $.ajax({ + url: "https://api.spotify.com/v1/browse/new-releases", + dataType: 'json', + data: { + country: 'US', + limit: 10 + }, + success: function(data, status) { + $album.html(''); + $albumlist.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()); + } + }); + }); diff --git a/main.css b/main.css new file mode 100644 index 0000000..546562b --- /dev/null +++ b/main.css @@ -0,0 +1,19 @@ +#album { + width: 300px; + height: 380px; + background-color: #cecece; +} + +#instagramdetails { + background-color: #cecece; + width: 750px; +} + +.wrapper { + display: flex; + flex-direction: row; +} + +.albumcover { + cursor: pointer; +} \ No newline at end of file