gSchool · vincentotchkov · Jun 2, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/cats.js b/cats.js
@@ -0,0 +1,24 @@
+var cats =[
+
+{name: "fluffy", age:22, type:"Siamevil"},
+{name: "jim", age:23, type:"unknown"},
+{name: "greg", age:24, type:"Neanderthal"},
+{name: "jeff", age:24, type:"Stupid"},
+]
+
+var my_cat = cats.find(function(cat){
+return cat.name=="fluffy";
+})
+
+console.log("my cat is " ,my_cat);
+console.log("my cat is " ,my_cat.name);
+console.log("my cat is " ,my_cat.age);
+console.log("my cat is " ,my_cat.type);
+
+
+var fruits = ["apple","pear","mango","banana"]
+
+fruits.sort(function(){
+  fruits.splice();
+  return 0.5-Math.random()
+});
diff --git a/images/.DS_Store b/images/.DS_Store
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/index.html b/index.html
@@ -1,15 +1,76 @@
 <!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">
+
+  <script
+    src="https://code.jquery.com/jquery-3.2.1.min.js"
+    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+    crossorigin="anonymous"></script>
+
+  <script type="text/javascript" src="script.js" defer></script>
+
+  <link rel="stylesheet" href="style.css">
+
+
+  <!-- Latest compiled and minified CSS -->
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+
+
+  <title>Track Bin</title>
+</head>
+
+<body>
+
+  <div class="container-fluid">
+
+    <div id="top" class="row">
+      <div class="row-md-12"></div>
+
+    </div>
+
+    <div id="col1">
+      <div class="col-md-6">
+        <p id="trackBin">track bin</p>
+
+        <a href="playlist.html"><button class="btns" type="button" name="button">choose tracks</button></a>
+      </div>
+
+      <div id="col2">
+        <div id = "col2Inner"></div>
+
+        <div class = "covers">
+
+        </div>
+        <div id = "track" class="col-md-6">
+          <div id = "arty">
+
+
+          </div>
+        </div>
+      </div>
+
+
+
+      </div>
+      <footer>
+        <div id="bottom" class="row">
+          <div class="row-md-12">
+            <p class="bottomCont">© 2017 Vinnii Otchkov</p>
+          </div>
+      </footer>
+
+    </div>
+
+</body>
+
 </html>
diff --git a/playlist.html b/playlist.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+
+  <script type="text/javascript" src="script.js" defer></script>
+
+  <link rel="stylesheet" href="style.css">
+
+
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+
+
+  <title>Choose Tracks</title>
+</head>
+
+<body>
+
+  <div class="container-fluid">
+
+    <div id="top2" class="row">
+      <div class="row-md-12">
+
+        <p id="top2Content">
+          click an album to add its tracks to the bin
+        </p>
+      </div>
+
+    </div>
+    <div id="midTop" class="row">
+      <div class="row-md-12"></div>
+
+
+    </div>
+    <div id="midBot" class="row">
+      <div class="row-md-12">
+        <textarea id="textBox" rows="10" cols="150"></textarea><br/><br />
+
+        <button class="btns" id="clrBtn" type="button" name="button">clear tracks</button>
+
+        <button class="btns" id="subBtn" type="button" name="button">submit bin</button>
+
+      </div>
+
+    </div>
+
+    <footer>
+      <div id="bottom" class="row">
+        <div class="row-md-12">
+          <p class="bottomCont">© 2017 Vinnii Otchkov</p>
+        </div>
+    </footer>
+
+    </div>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,101 @@
+$(document).ready(function() {
+  console.log("ready!");
+
+  var albumArr = [];
+
+  albumArr[0] = {
+    src: "images/21.jpg"
+  };
+
+
+  albumArr[1] = {
+    src: "images/ghost_in_the_machine.jpg"
+  };
+
+
+  albumArr[2] = {
+    src: "images/red.jpg"
+  };
+
+  albumArr[3] = {
+    src: "images/the_division_bell.jpg"
+  };
+
+  albumArr[4] = {
+    src: "images/thriller.jpg"
+  };
+
+
+  $('#clrBtn').click(function() {
+    $('#textBox').val('');
+  });
+
+
+  $('#subBtn').click(function() {
+    $.post("https://lit-fortress-6467.herokuapp.com/post", function(data) {
+      alert(data);
+    });
+    $('#textBox').val('');
+  })
+
+
+
+  $.ajax({
+      url: "https://lit-fortress-6467.herokuapp.com/object"
+
+    })
+    .done(function(data) {
+      var music = data.results;
+
+      music.sort(function() {
+        return 0.5 - Math.random();
+      })
+
+      music.splice(0, 2);
+
+      music.forEach(function(f) {
+        $("#arty").append(
+          "<img src=images/" + f.cover_art + ">"
+
+        )
+      })
+
+    });
+
+
+
+    $.ajax({
+        url: "https://lit-fortress-6467.herokuapp.com/object"
+
+      })
+      .done(function(data) {
+        var music2 = data.results;
+
+        music2.sort(function() {
+          return 0.5 - Math.random();
+        })
+
+        music2.forEach(function(f) {
+          $("#midTop").append(
+            "<img src=images/" + f.cover_art + ">"
+          )
+        })
+
+        $('#midTop img').click(function(e){
+
+          var newSrc = event.target.getAttribute('src');
+
+          newSrc = newSrc.replace('images/','');
+
+          var albumInfo = music2.find(function(stuff){
+
+            if( stuff.cover_art === newSrc){
+              $("#textBox").append('Artist: '+stuff.artist+ '\n'+'Title: ' +stuff.title +'\n' +'\n');
+            };
+
+          })
+        })
+      });
+
+
+});