gSchool · lschuab · Aug 24, 2018 · Aug 27, 2018 · Aug 27, 2018 · Aug 27, 2018
diff --git a/index.html b/index.html
@@ -2,10 +2,34 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>track bin</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <script defer src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="scripts/splash.js"></script>
   </head>
   <body>
-
+    <div class="container">
+      <header>
 
+      </header>
+      <main>
+        <div id="splash-left">
+          <div id="content">
+            <h1 id="title">track bin</h1>
+            <form action="playlist.html">
+              <button id="choose-tracks">choose tracks</button>
+            </form>
+          </div>
+        </div>
+        <div id="splash-right">
+          <img id="album1" src="" alt="" class="album-cover">
+          <img id="album2" src="" alt="" class="album-cover">
+          <img id="album3" src="" alt="" class="album-cover">
+        </div>
+      </main>
+      <footer>
+        <span id="copyright"><pre>            © 2018 Leandro Schuab</pre></span>
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/playlist.html b/playlist.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>track bin</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <script defer src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="scripts/bin.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <header id="header-playlist">
+        <span class="instructions"><pre>            click an album to add its tracks to the bin</pre></span>
+      </header>
+      <main id="bin-maker">
+        <form action="" id="search-form">
+          <div id="search-div">
+            <input type="text" id="search-input" placeholder="search for albums...">
+            <button id="search-btn">search</button>
+          </div>
+        </form>
+        <div id="album-scroll">
+        </div>
+        <div id="bin-container">
+          <div id="track-adder">
+            <div id="selected-album">
+            </div>
+            <select name="" id="tracks" size="10" readonly></select>
+            <img src="resources/arrow.png" alt="" id="arrow">
+            <textarea name="" id="bin" rows="10" readonly></textarea>
+          </div>
+          <div id="buttons-container">
+            <button id="clear-tracks-btn">clear tracks</button>
+            <button id="submit-bin-btn">submit bin</button>
+          </div>
+
+        </div>
+
+
+      </main>
+      <footer>
+        <span id="copyright"><pre>            © 2018 Leandro Schuab</pre></span>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/resources/arrow.png b/resources/arrow.png
diff --git a/resources/fadedTrack.jpg b/resources/fadedTrack.jpg
diff --git a/scripts/bin.js b/scripts/bin.js
@@ -0,0 +1,78 @@
+const albumScroll = document.getElementById('album-scroll');
+const bin = document.getElementById('bin');
+const apiKey = '27c16b31f7afa331a59fd0bed30d96e1';
+const tracks = document.getElementById('tracks');
+
+// Implementation using original API
+// axios.get('https://lit-fortress-6467.herokuapp.com/object')
+//   .then(response => {
+//       const data = response.data.results;
+//       for (const album of data) {
+//         albumScroll.insertAdjacentHTML('beforeend', `
+//           <img src="images/${album.cover_art}" alt="" class="add-album" id="${album.artist}: ${album.title}">
+//         `);
+//       }
+// });
+
+
+document.getElementById('search-btn').addEventListener('click', e => {
+  e.preventDefault();
+  albumScroll.textContent = '';
+  const searchTerms = document.getElementById('search-input').value;
+  axios.get(`http://ws.audioscrobbler.com/2.0/?method=album.search&album=${searchTerms}&api_key=${apiKey}&format=json&limit=20`)
+  .then(response => {
+    const data = response.data.results.albummatches.album;
+    for (const album of data) {
+      albumScroll.insertAdjacentHTML('beforeend', `
+        <img src="${album.image[3]['#text']}" alt="" class="add-album" id="${album.artist}: ${album.name}">
+      `);
+    }
+
+
+  });
+});
+
+
+
+albumScroll.addEventListener('click', e => {
+  if (e.target && e.target.nodeName === "IMG") {
+    const selectedAlbum = document.getElementById('selected-album');
+    selectedAlbum.textContent = '';
+
+    tracks.textContent = '';
+
+    const albumName = e.target.id.split(': ');
+    axios.get(`http://ws.audioscrobbler.com/2.0/?method=album.getinfo&artist=${albumName[0]}&album=${albumName[1]}&api_key=${apiKey}&format=json`)
+    .then(response => {
+      const albumData = response.data.album;
+      selectedAlbum.insertAdjacentHTML('beforeend', `
+        <p>Add tracks from<p>
+        <p>${e.target.id}</p>
+        <img src="${albumData.image[3]['#text']}" alt="" id="selected-art">
+      `);
+      for (const track of albumData.tracks.track) {
+        tracks.insertAdjacentHTML('beforeend', `
+          <option>${track.name} \t${Math.floor(track.duration / 60)}:${track.duration % 60}</option>
+        `);
+      }
+    });
+  }
+});
+
+document.getElementById('arrow').addEventListener('click', e => {
+  const selectedTrack = tracks.value;
+  if (selectedTrack) {
+    bin.textContent += selectedTrack + "\n";
+  }
+});
+
+document.getElementById('clear-tracks-btn').addEventListener('click', e => {
+  bin.textContent = '';
+});
+
+document.getElementById('submit-bin-btn').addEventListener( 'click', e => {
+  axios.post('https://lit-fortress-6467.herokuapp.com/post', bin.textContent)
+  .then(response => {
+    console.log(response.data);
+  });
+});
diff --git a/scripts/splash.js b/scripts/splash.js
@@ -0,0 +1,39 @@
+// Implementation with original API
+// axios.get('https://lit-fortress-6467.herokuapp.com/object')
+//   .then(response => {
+//       const data = response.data.results;
+//       const selectedPics = [];
+//       let picIndex = 0;
+//       for (let i = 1; i <= 3; i++) {
+//         do {
+//           picIndex = Math.floor(Math.random() * data.length);
+//         } while (selectedPics.includes(picIndex));
+//         selectedPics.push(picIndex);
+//         document.getElementById(`album${i}`).src = `images/${data[picIndex].cover_art}`;
+//       }
+// });
+
+// Uses lastFM API to get current top 50 artists, chooses three f those at radom, then uses the api again to get the image of the top album of each of those three artists
+const apiKey = '27c16b31f7afa331a59fd0bed30d96e1';
+const albums = [];
+
+axios.get(`http://ws.audioscrobbler.com/2.0/?method=chart.gettopartists&api_key=${apiKey}&format=json`)
+.then(response => {
+  const promiseArr = [];
+  const topArtists = response.data.artists.artist;
+  const selectedArtists = [];
+  let artistIndex = 0;
+  for (let i = 1; i <= 3; i++) {
+    do {
+      artistIndex = Math.floor(Math.random() * topArtists.length);
+    } while (selectedArtists.includes(artistIndex));
+    selectedArtists.push(artistIndex);
+    promiseArr.push(axios.get(`http://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=${topArtists[artistIndex].name}&api_key=${apiKey}&format=json&limit=1`));
+  }
+  return Promise.all(promiseArr);
+})
+.then(promises => {
+  for (let i = 0; i< 3; i++ ) {
+      document.getElementById(`album${i + 1}`).src = promises[i].data.topalbums.album[0].image[3]['#text'];
+  }
+});