gSchool · nataliedespain · Jul 14, 2017 · Jul 14, 2017 · Jul 14, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/bloom.jpg b/images/bloom.jpg
diff --git a/images/bon_iver.jpg b/images/bon_iver.jpg
diff --git a/images/cleopatra.jpg b/images/cleopatra.jpg
diff --git a/images/currents.jpg b/images/currents.jpg
diff --git a/images/daughter.jpg b/images/daughter.jpg
diff --git a/images/flume.jpg b/images/flume.jpg
diff --git a/images/in_return.jpg b/images/in_return.jpg
diff --git a/images/naked_famous.jpg b/images/naked_famous.jpg
diff --git a/images/pharmacy.jpg b/images/pharmacy.jpg
diff --git a/images/purity_ring.jpg b/images/purity_ring.jpg
diff --git a/images/rise.jpg b/images/rise.jpg
diff --git a/images/spreading_rumors.jpg b/images/spreading_rumors.jpg
diff --git a/images/strfkr.jpg b/images/strfkr.jpg
diff --git a/images/division_bell.jpg → images/the_division_bell.jpg b/images/division_bell.jpg → images/the_division_bell.jpg
diff --git a/images/zaba.jpg b/images/zaba.jpg
diff --git a/images/zhu.jpg b/images/zhu.jpg
diff --git a/index.html b/index.html
@@ -2,10 +2,44 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Playlist</title>
   </head>
   <body>
-
+
+    <div class="container">
+
+
+      <div class="header">
+
+      </div>
+
+      <div class="body">
+        <div class="left">
+
+          <div class="left-container">
+            <h1>track bin</h1>
+            <a href="playlist.html"><button type="button">choose tracks</button></a>
+          </div>
+
+        </div>
+        <div class="right">
+          <div class="right-overlay"></div>
+
+          <div class="right-container">
+          </div>
+
+        </div>
+      </div>
+
+      <div class="footer">
+        <h6>&copy; 2017 Natalie Despain</h6>
+      </div>
+
+    </div>
+
 
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,28 @@
+$(document).ready(function() {
+
+
+  function randomImgs() {
+    $.ajax({url: 'https://baroque-chaise-16357.herokuapp.com/api', success: function(result) {
+
+      var randomIndexes = []
+      while(randomIndexes.length < 3){
+          var randomnumber = Math.ceil(Math.random()*result.results.length) - 1;
+          if(randomIndexes.indexOf(randomnumber) > -1) continue;
+          randomIndexes[randomIndexes.length] = randomnumber;
+      }
+
+      for (var index of randomIndexes) {
+        var div = $("<div></div>").css({'background': `url('images/${result.results[index].cover_art}')`, 'background-size': 'cover'});
+        $('.right-container').append(div);
+      }
+
+    }});
+  }
+
+  randomImgs();
+
+
+
+
+
+})
diff --git a/playlist.html b/playlist.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="playlist.js"></script>
+    <link rel="stylesheet" href="playliststyle.css">
+    <title>Playlist</title>
+  </head>
+  <body>
+
+    <div class="container">
+
+
+      <div class="header">
+        <h1>click an album to add it's tracks to bin</h1>
+      </div>
+
+      <div class="body">
+
+        <div class="slider">
+          <div class="content">
+          </div>
+        </div>
+
+        <div class="bin-container">
+          <div class="box">
+            <h6>Add tracks from:</h6>
+            <h6 id="current-album">Click on an album!</h6>
+            <div class="current-album-image">
+            </div>
+          </div>
+          <div class="album-tracks">
+
+          </div>
+          <div class="arrow">
+
+          </div>
+          <div class="playlist-tracks">
+
+          </div>
+        </div>
+        <div class="button-container">
+          <button type="button" id="clear">clear tracks</button>
+          <button type="button" id="submit">submit bin</button>
+        </div>
+
+      </div>
+
+      <div class="footer">
+        <h6>&copy; 2017 Natalie Despain</h6>
+      </div>
+
+    </div>
+
+
+  </body>
+</html>
diff --git a/playlist.js b/playlist.js
@@ -0,0 +1,116 @@
+$(document).ready(function() {
+
+
+
+  $.ajax({url: 'https://baroque-chaise-16357.herokuapp.com/api', success: function(result) {
+
+    // APPEND IMGS TO SLIDER
+    for (var i = 0; i < result.results.length; i++) {
+      var div = $(`<div id="${result.results[i].id}" class="scrollImg"></div>`).css({'background': `url('images/${result.results[i].cover_art}')`, 'background-size': 'cover'});
+      $('.content').append(div);
+    }
+
+
+    // // ADD TEXT ON CLICK
+    // $('.scrollImg').click(function(e){
+    //   var id = Number(e.target.id);
+    //
+    //   for (var item of result.results) {
+    //     if (item.id === id) {
+    //       var text = $(`<h6>${item.artist}: ${item.title}</h6>`);
+    //       $('.box').append(text);
+    //     }
+    //   }
+    //
+    // })
+
+    // CHANGE CURRENT SELECTION
+    $('.scrollImg').click(function(e){
+      $('.album-tracks').empty();
+      var id = Number(e.target.id);
+
+      for (var item of result.results) {
+        if (item.id === id) {
+          $('#current-album').text(`${item.artist}: ${item.title}`);
+          $('.current-album-image').css({'background': `url('images/${item.cover_art}')`, 'background-size': 'cover'})
+          for (var i = 0; i < item.tracks.length; i++) {
+            var track = $(`<h6>${item.tracks[i].title} - ${item.tracks[i].length}</span></h6>`);
+            $('.album-tracks').append(track);
+          }
+        }
+      }
+
+    })
+
+    // ADD SONG TO PLAYLIST
+    $('.album-tracks').click(function(e){
+      if (e.target.localName === 'h6') {
+        var song = $(`<h6>${e.target.innerText}</span></h6>`);
+        $('.playlist-tracks').append(song);
+      }
+    })
+
+  }});
+
+
+
+  // CLEAR PLAYLIST
+  $('#clear').click(function() {
+    $('.playlist-tracks').empty();
+  })
+
+
+  // SUBMIT AND POST
+  $('#submit').click(function() {
+
+    var collection = {};
+    var htmlCollection = $('.playlist-tracks').children();
+    for (var i = 0; i < htmlCollection.length; i++) {
+      var split = htmlCollection[i].innerHTML.split(" - ");
+      collection[split[0]] = split[1];
+    }
+
+    var jsonData = JSON.stringify(collection)
+    console.log(jsonData)
+
+    $.ajax({
+      type: "POST",
+      url: "https://lit-fortress-6467.herokuapp.com/post",
+      data: jsonData,
+      success: function(msg) {
+        console.log(msg);
+      }
+    });
+
+  })
+
+
+
+  // $('#submit').click(function() {
+  //
+  //   var collection = {};
+  //   var htmlCollection = $('.box').children();
+  //   for (var i = 0; i < htmlCollection.length; i++) {
+  //     var split = htmlCollection[i].innerHTML.split(": ");
+  //     collection[split[0]] = split[1];
+  //   }
+  //
+  //   var jsonData = JSON.stringify(collection)
+  //   console.log(jsonData)
+  //
+  //   $.ajax({
+  //     type: "POST",
+  //     url: "https://lit-fortress-6467.herokuapp.com/post",
+  //     data: jsonData,
+  //     success: function(msg) {
+  //       console.log(msg);
+  //     }
+  //   });
+  //
+  // })
+
+
+
+
+
+})