gSchool · tommartinaz · Jun 2, 2017 · Jun 2, 2017 · Jun 5, 2017 · Jan 24, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/app.js b/app.js
@@ -0,0 +1,69 @@
+var albumArt = $.get("http://0.0.0.0:8000/music.json");
+albumArt.done(function(data) {
+  var albumInfo = (data.results);
+
+  //-----------------------------------------------------------
+  //  RANDOMIZE ALBUM ORDER
+  for (var i = albumInfo.length - 1, j = 0, temp = null; i > 0; i--) {
+    j = Math.floor(Math.random() * (i + 1));
+    temp = albumInfo[i];
+    albumInfo[i] = albumInfo[j];
+    albumInfo[j] = temp;
+  }
+  //------------------------------------------------------------
+
+  //------------------------------------------------------------
+  //SORTS ALBUMS BY ARTIST AND ALBUM TITLE
+  var sortedAlbums = albumInfo.map(a => Object.assign({}, a));
+  sortedAlbums = sortedAlbums.sort(function(a, b) {
+    if (a.artist < b.artist) {
+      return -1;
+    } else if (a.artist === b.artist) {
+      if (a.title < b.title) {
+        return -1;
+      } else {
+        return 1;
+      }
+    } else {
+      return 1;
+    }
+  })
+  //-------------------------------------------------------------
+
+
+  for (i = 0; i < sortedAlbums.length; i++) {
+    $("#thumbnails").append(`
+      <div class='thumbnails'>
+      <img src='images/${sortedAlbums[i].cover_art}'></div>
+    `);
+  };
+  $("#thumbnails .thumbnails").click(function() {
+    var infoForFind = $(event.target).attr("src").replace('images/', '');
+    var found = albumInfo.find(function(value) {
+      return value.cover_art === infoForFind;
+    });
+    $(".text").append(`
+      ${found.artist} - ${found.title}<br>
+      `);
+  });
+  for (var k = 0; k < 3; k++) {
+    var divID = "album" + (k + 1);
+
+    $(".right").append(`
+      <div id=${divID} class="albumArt">
+      <img src="images/${albumInfo[k].cover_art}">
+      </div>
+  `);
+  }
+  $("#clear-tracks").click(function() {
+    $(".text").empty();
+  });
+});
+$("#submit-bin").click(function() {
+  var inputData = $(".text").val();
+  console.log(inputData);
+  $.post("https://lit-fortress-6467.herokuapp.com/post", inputData, function() {
+    alert('got it');
+  })
+  $(".text").empty();
+});
diff --git a/images/21.jpg b/images/21.jpg
diff --git a/images/2112.jpg b/images/2112.jpg
diff --git a/images/a_farewell_to_kings.jpg b/images/a_farewell_to_kings.jpg
diff --git a/images/all_that_you_cant_leave_behind.jpg b/images/all_that_you_cant_leave_behind.jpg
diff --git a/images/caress_of_steel.jpg b/images/caress_of_steel.jpg
diff --git a/images/clockwork_angels.jpg b/images/clockwork_angels.jpg
diff --git a/images/color_and_the_shape.jpg b/images/color_and_the_shape.jpg
diff --git a/images/counterparts.jpg b/images/counterparts.jpg
diff --git a/images/empire.jpg b/images/empire.jpg
diff --git a/images/face_value.jpg b/images/face_value.jpg
diff --git a/images/fly_by_night.jpg b/images/fly_by_night.jpg
diff --git a/images/genesis.jpg b/images/genesis.jpg
diff --git a/images/ghost_in_the_machine.jpg b/images/ghost_in_the_machine.jpg
diff --git a/images/grace_under_pressure.jpg b/images/grace_under_pressure.jpg
diff --git a/images/hemispheres.jpg b/images/hemispheres.jpg
diff --git a/images/hold_your_fire.jpg b/images/hold_your_fire.jpg
diff --git a/images/human_clay.jpg b/images/human_clay.jpg
diff --git a/images/hysteria.jpg b/images/hysteria.jpg
diff --git a/images/invisible_touch.jpg b/images/invisible_touch.jpg
diff --git a/images/kilroy_was_here.jpg b/images/kilroy_was_here.jpg
diff --git a/images/leftoverture.jpg b/images/leftoverture.jpg
diff --git a/images/moving_pictures.jpg b/images/moving_pictures.jpg
diff --git a/images/my_own_prison.jpg b/images/my_own_prison.jpg
diff --git a/images/no_jacket_required.jpg b/images/no_jacket_required.jpg
diff --git a/images/permanent_waves.jpg b/images/permanent_waves.jpg
diff --git a/images/power_windows.jpg b/images/power_windows.jpg
diff --git a/images/pyromania.jpg b/images/pyromania.jpg
diff --git a/images/red.jpg b/images/red.jpg
diff --git a/images/roll_the_bones.jpg b/images/roll_the_bones.jpg
diff --git a/images/rush.jpg b/images/rush.jpg
diff --git a/images/secret_samadhi.jpg b/images/secret_samadhi.jpg
diff --git a/images/signals.jpg b/images/signals.jpg
diff --git a/images/sixteen_stone.jpg b/images/sixteen_stone.jpg
diff --git a/images/slippery_when_wet.jpg b/images/slippery_when_wet.jpg
diff --git a/images/snakes_and_arrows.jpg b/images/snakes_and_arrows.jpg
diff --git a/images/test_for_echo.jpg b/images/test_for_echo.jpg
diff --git a/images/the_better_life.jpg b/images/the_better_life.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/the_joshua_tree.jpg b/images/the_joshua_tree.jpg
diff --git a/images/thriller.jpg b/images/thriller.jpg
diff --git a/images/thriller.png b/images/thriller.png
diff --git a/images/throwing_copper.jpg b/images/throwing_copper.jpg
diff --git a/images/vapor_trails.jpg b/images/vapor_trails.jpg
diff --git a/index.html b/index.html
@@ -1,15 +1,39 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title></title>
-  </head>
-  <body>
-      <select name="my_select" style="height: 40px; line-height: 100px;">
-        <option name="reggae"> Select your genre </option>
-        <option name="reggae"> Reggae </option>
-        <option name="blues"> Blues </option>
-      </select>
-
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="app.js" defer>
+  </script>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="container">
+    <header>
+    </header>
+    <main>
+      <section class="left">
+        <div class="trackbin">
+          <div class="trackbin-text">
+            track bin
+          </div>
+          <a href='playlist.html'><button type="button" name="button">choose tracks</button></a>
+        </div>
+      </section>
+      <section class="right">
+        <div class="album_list">
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="footer_text">&copy;2017 Tom Martin
+
+      </div>
+    </footer>
+  </div>
+</body>
+
 </html>
diff --git a/mockups/playlist_page.png b/mockups/playlist_page.png
diff --git a/mockups/playlist_stretch2.fw.png b/mockups/playlist_stretch2.fw.png
diff --git a/mockups/splash_page.png b/mockups/splash_page.png
diff --git a/music.json b/music.json
@@ -0,0 +1,248 @@
+{
+  "results": [{
+      "id": 1,
+      "title": "Moving Pictures",
+      "artist": "Rush",
+      "cover_art": "moving_pictures.jpg"
+    },
+    {
+      "id": 2,
+      "title": "The Joshua Tree",
+      "artist": "U2",
+      "cover_art": "the_joshua_tree.jpg"
+    },
+    {
+      "id": 3,
+      "title": "Empire",
+      "artist": "Queensryche",
+      "cover_art": "empire.jpg"
+    },
+    {
+      "id": 4,
+      "title": "All That You Can't Leave Behind",
+      "artist": "U2",
+      "cover_art": "all_that_you_cant_leave_behind.jpg"
+    },
+    {
+      "id": 5,
+      "title": "Left Overture",
+      "artist": "Kansas",
+      "cover_art": "leftoverture.jpg"
+    },
+    {
+      "id": 6,
+      "title": "Signals",
+      "artist": "Rush",
+      "cover_art": "signals.jpg"
+    },
+    {
+      "id": 7,
+      "title": "The Colour and the Shape",
+      "artist": "Foo Fighters",
+      "cover_art": "color_and_the_shape.jpg"
+    },
+    {
+      "id": 8,
+      "title": "Face Value",
+      "artist": "Phil Collins",
+      "cover_art": "face_value.jpg"
+    },
+    {
+      "id": 9,
+      "title": "Genesis",
+      "artist": "Genesis",
+      "cover_art": "genesis.jpg"
+    },
+    {
+      "id": 10,
+      "title": "Human Clay",
+      "artist": "Creed",
+      "cover_art": "human_clay.jpg"
+    },
+    {
+      "id": 11,
+      "title": "Hysteria",
+      "artist": "Def Leppard",
+      "cover_art": "hysteria.jpg"
+    },
+    {
+      "id": 12,
+      "title": "Invisible Touch",
+      "artist": "Genesis",
+      "cover_art": "invisible_touch.jpg"
+    },
+    {
+      "id": 13,
+      "title": "Kilroy Was Here",
+      "artist": "Styx",
+      "cover_art": "kilroy_was_here.jpg"
+    },
+    {
+      "id": 14,
+      "title": "My Own Prison",
+      "artist": "Creed",
+      "cover_art": "my_own_prison.jpg"
+    },
+    {
+      "id": 15,
+      "title": "No Jacket Required",
+      "artist": "Phil Collins",
+      "cover_art": "no_jacket_required.jpg"
+    },
+    {
+      "id": 16,
+      "title": "Pyromania",
+      "artist": "Def Leppard",
+      "cover_art": "pyromania.jpg"
+    },
+    {
+      "id": 17,
+      "title": "Slippery When Wet",
+      "artist": "Bon Jovi",
+      "cover_art": "slippery_when_wet.jpg"
+    },
+    {
+      "id": 18,
+      "title": "The Better Life",
+      "artist": "3 Doors Down",
+      "cover_art": "the_better_life.jpg"
+    },
+    {
+      "id": 19,
+      "title": "Ghost in the Machine",
+      "artist": "The Police",
+      "cover_art": "ghost_in_the_machine.jpg"
+    },
+    {
+      "id": 20,
+      "title": "Red",
+      "artist": "Black Uhuru",
+      "cover_art": "red.jpg"
+    },
+    {
+      "id": 21,
+      "title": "The Division Bell",
+      "artist": "Pink Floyd",
+      "cover_art": "the_division_bell.jpg"
+    },
+    {
+      "id": 22,
+      "title": "Thriller",
+      "artist": "Michael Jackson",
+      "cover_art": "thriller.jpg"
+    },
+    {
+      "id": 23,
+      "title": "21",
+      "artist": "Adele",
+      "cover_art": "21.jpg"
+    },
+    {
+      "id": 24,
+      "title": "Vapor Trails",
+      "artist": "Rush",
+      "cover_art": "vapor_trails.jpg"
+    },
+    {
+      "id": 25,
+      "title": "Snakes and Arrows",
+      "artist": "Rush",
+      "cover_art": "snakes_and_arrows.jpg"
+    },
+    {
+      "id": 26,
+      "title": "Roll the Bones",
+      "artist": "Rush",
+      "cover_art": "roll_the_bones.jpg"
+    },
+    {
+      "id": 27,
+      "title": "Hold Your Fire",
+      "artist": "Rush",
+      "cover_art": "hold_your_fire.jpg"
+    },
+    {
+      "id": 28,
+      "title": "Caress of Steel",
+      "artist": "Rush",
+      "cover_art": "caress_of_steel.jpg"
+    },
+    {
+      "id": 29,
+      "title": "Counterparts",
+      "artist": "Rush",
+      "cover_art": "counterparts.jpg"
+    },
+    {
+      "id": 30,
+      "title": "Hemispheres",
+      "artist": "Rush",
+      "cover_art": "hemispheres.jpg"
+    },
+    {
+      "id": 31,
+      "title": "Power Windows",
+      "artist": "Rush",
+      "cover_art": "power_windows.jpg"
+    },
+    {
+      "id": 32,
+      "title": "Clockwork Angels",
+      "artist": "Rush",
+      "cover_art": "clockwork_angels.jpg"
+    },
+    {
+      "id": 33,
+      "title": "Fly by Night",
+      "artist": "Rush",
+      "cover_art": "fly_by_night.jpg"
+    },
+    {
+      "id": 34,
+      "title": "A Farewell to Kings",
+      "artist": "Rush",
+      "cover_art": "a_farewell_to_kings.jpg"
+    },
+    {
+      "id": 35,
+      "title": "Test for Echo",
+      "artist": "Rush",
+      "cover_art": "test_for_echo.jpg"
+    },
+    {
+      "id": 36,
+      "title": "Grace Under Pressure",
+      "artist": "Rush",
+      "cover_art": "grace_under_pressure.jpg"
+    },
+    {
+      "id": 37,
+      "title": "Permanent Waves",
+      "artist": "Rush",
+      "cover_art": "permanent_waves.jpg"
+    },
+    {
+      "id": 38,
+      "title": "2112",
+      "artist": "Rush",
+      "cover_art": "2112.jpg"
+    },
+    {
+      "id": 39,
+      "title": "Secret Samadhi",
+      "artist": "Live",
+      "cover_art": "secret_samadhi.jpg"
+    }, {
+      "id": 40,
+      "title": "Throwing Copper",
+      "artist": "Live",
+      "cover_art": "throwing_copper.jpg"
+    },
+    {
+      "id": 41,
+      "title": "Sixteen Stone",
+      "artist": "Bush",
+      "cover_art": "sixteen_stone.jpg"
+    }
+  ]
+}