advanced-js · afeld · Mar 3, 2016 · Mar 3, 2016 · Mar 3, 2016 · Mar 3, 2016
diff --git 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
@@ -2,7 +2,38 @@
 <html>
   <head>
     <title>Mashup</title>
+    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="main.css">
   </head>
   <body>
+		<div class="container">
+
+		  <div class="row">
+		  	<div class="col-sm-12">
+					<a href="https://developer.spotify.com/web-api/console/get-new-releases/">Spotify Oauth Token: </a>
+			    <input type="text" id="token" />
+			    <button id="submit" class="btn btn-primary">Submit</button>
+		  	</div>
+
+		  </div>			
+		  <h1>Top 10 Albums</h1>
+			<div class="row">
+				<div class="col-sm-12">
+					<div id="albumlist">
+
+					</div>
+				</div>
+
+			</div>
+			<hr>
+		  <div class="wrapper">
+		    <div id="album">
+		    </div>
+		    <div id="instagramdetails">
+		    </div>
+		  </div>
+		</div>  	
+		<script type="text/javascript" src="index.js"></script>
   </body>
 </html>
diff --git a/index.js 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('<img src="' + url + '"/>');
+          }
+        }
+      });
+    };
+
+
+    $('#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 = $('<img class="albumcover" data-name="' + name + '" data-uri="' + album.uri + '" width="100" height="100" src="' + album.images[0].url + '"/>');
+            $albumlist.append($imageCover);
+            $imageCover.on('click', function() {
+              var image = $(this);
+              var uri = image.data('uri');
+              var name = image.data('name');
+              var iframe = '<iframe class="spotifylink" src="https://embed.spotify.com/?uri=' + uri + '&" width="300" height="380" frameborder="0" allowtransparency="true"></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
@@ -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;
+}