gSchool · TheDavidKruse · Jun 2, 2017 · Jun 5, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/here/index.html b/here/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+  src="https://code.jquery.com/jquery-3.2.1.min.js"
+  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+  crossorigin="anonymous"></script>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+<script type="text/javascript">
+$.get('http://localhost:8080/here/myapi.json').then(function(data){
+  body.append(data);
+})
+</script>
+  </body>
+</html>
diff --git a/here/myapi.json b/here/myapi.json
@@ -0,0 +1,3 @@
+{
+  "music":[{"title":"the"}]
+}
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
diff --git a/index/index.html b/index/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js" charset="utf-8"></script>
+  <title>Home | Playlist</title>
+</head>
+
+<body>
+  <div class="container-fluid">
+    <div class="row" id='headerino'>
+      <div class="col-md-1">
+        <h2></h2>
+      </div>
+    </div>
+    <div id='mainish' class="row">
+      <div id='left_side' class="col-md-6">
+
+        <div class="thing">
+          <h1>track bin</h1>
+          <form action='../select/select.html'><input class='btn' type="submit" name="" value="choose tracks"></form>
+        </div>
+      </div>
+      <div id='right_side' class="col-md-6">
+        <div class="filter">
+          <div class="albums">
+
+          </div>
+        </div>
+        <div class="imgR">
+          <img id='tracks' src="../resources/track.jpg" alt="">
+        </div>
+
+      </div>
+    </div>
+    <div class="row" id='footerino'>
+
+      <h2>&copy David 2017</h2>
+
+    </div>
+
+  </div>
+</body>
+
+</html>
diff --git a/index/script.js b/index/script.js
@@ -0,0 +1,31 @@
+$( document ).ready( function() {
+$.ajax( {
+url: "https://lit-fortress-6467.herokuapp.com/object"
+} ).done( function( data ) {
+var arr = data.results;
+var int = [];
+
+// Data.results.reduce( function( acc, curr, i, arr ) {
+  while ( int.length < 3 ) {
+    var min = 0;
+    var max =  arr.length;
+    var num = ( Math.floor( Math.random() * ( max - min ) ) );
+    if ( !( int.includes( arr[ num ] ) ) ) {
+      int.push( arr[ num ] );
+    }
+  }
+
+// }, 0 );
+int.forEach( function( f ) {
+
+  $( ".dickshoe Mcgees" ).append( `
+      <div class="album_item">
+        <img class='album_img' src="../images/${f.cover_art}">
+      </div>
+
+
+
+  ` );
+} );
+} );
+} );
diff --git a/index/style.css b/index/style.css
@@ -0,0 +1,88 @@
+@font-face {
+  font-family: AvenirNextLTPro-Regular;
+  src: url(../fonts/AvenirNextLTPro-Regular.otf);
+}
+
+* {
+  font-family: AvenirNextLTPro-Regular;
+}
+/* Splash page */
+.container-fluid {
+  width: 100vw;
+  height: 100vh;
+}
+
+.albums {
+  margin: 8% auto;
+  width: 50%;
+  height: 70%;
+}
+.album_item{
+  width: 200px;
+  margin: 10px auto 0px auto;
+}
+.album_img{
+  width: 100%;
+}
+
+.filter {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+#tracks {
+  width: 50vw;
+  height: 100vh;
+  float: right;
+}
+
+#headerino {
+  height: 5%;
+  background-color: rgb(137, 138, 122);
+  border-bottom: 2px solid black;
+}
+
+#footerino {
+  height: auto;
+  color: white;
+  background-color: rgb(85, 85, 71);
+  bottom: 0px;
+  position: fixed;
+  width: 100vw;
+}
+
+#footerino h2 {
+  padding-top: .5%;
+  margin-left: 5%;
+}
+
+body {
+  background-color: rgb(240, 240, 240);
+}
+
+#right_side {
+  padding: 0;
+  height: 100vh;
+}
+
+.thing {
+  color: purple;
+  padding-top: 30%;
+  width: 50%;
+  margin: auto;
+}
+
+.thing input {
+  width: 50%;
+  height: 15%;
+  color: white;
+  background-color: rgb(40, 40, 28);
+}
+
+#left_side {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
diff --git a/select/script.js b/select/script.js
@@ -0,0 +1,39 @@
+$( document ).ready( function() {
+  $.ajax( { url: "https://lit-fortress-6467.herokuapp.com/object" } ).done( function( data ) {
+
+    data.results.forEach( function( f ) {
+
+      $( ".album_lists" ).append( `
+      <div class="album_item">
+        <img class='album_img' src="../images/${f.cover_art}">
+      </div>
+  ` );
+      // ( "object" ).
+    } );
+    var f = data.results;
+    var hold = [];
+    $( "img" ).click( function() {
+      var findMe = $( this ).attr( "src" ).slice( 10 );
+      var thething = f.find( function( { cover_art } ) {
+        return cover_art === findMe;
+      } );
+      hold.push( thething );
+      $( ".track_list" ).append( `
+<div class='track_info'>
+  ${thething.artist} : ${thething.title}
+</div>
+
+
+` );
+    } );
+    $( "input[name=clear]" ).click( function() {
+      $( ".track_list" ).empty();
+    } );
+    $( "input[name=submit]" ).click( function() {
+      console.log( hold );
+      $.ajax( { method: "POST", url: "https://lit-fortress-6467.herokuapp.com/post", data: hold } ).done( function( data ) {
+        console.log( data );
+      } );
+    } );
+  } );
+} );
diff --git a/select/select.html b/select/select.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js" charset="utf-8"></script>
+  <title>Select | Playlist</title>
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row" id='headish'>
+      <div class="col-md-12">
+        <h2>click an album to add its tracks to the bin</h2>
+      </div>
+    </div>
+    <div id='mainish' class="row">
+      <div class="album_lists">
+      </div>
+      <div class="row track_list">
+      </div>
+      <div id="button_div" class="row">
+        <input class="btn" type="button" name="clear" value="clear tracks">
+        <input class="btn" type="submit" name="submit" value="submit bin">
+      </div>
+    </div>
+    <div class="row" id='footerish'>
+      <h2>&copy David 2017</h2>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/select/style.css b/select/style.css
@@ -0,0 +1,85 @@
+@font-face {
+  font-family: AvenirNextLTPro-Regular;
+  src: url(../fonts/AvenirNextLTPro-Regular.otf);
+}
+
+* {
+  font-family: AvenirNextLTPro-Regular;
+}
+/* Splash page */
+.container-fluid {
+  width: 100vw;
+  height: 100vh;
+}
+
+.album_lists {
+width: auto;
+height:100px;
+margin: 3vh 0 0 3vw;
+overflow: auto;
+overflow-x: auto;
+white-space: nowrap;
+}
+.album_item{
+  display: inline-block;
+  width: 150px;
+  margin-left: 10px;
+}
+.album_img{
+  width: 100px;
+}
+
+#tracks {
+  width: 50vw;
+  height: 100vh;
+  float: right;
+}
+.track_list{
+  margin: 4% auto 0 auto;
+  height: 30vh;
+  width:80%;
+  background-color: rgb(234,234,234);
+  border: 2px solid black;
+  overflow-y: scroll;
+}
+#button_div{
+  margin-left:10%;
+  margin-top: 5vh;
+}
+#button_div input{
+  color: white;
+  width: 200px;
+  height: 40px;
+  background-color: rgb(40,40,28);
+}
+
+#headish {
+  width: 100vw;
+  height: 15vh;
+  background-color: rgb(137, 138, 122)
+}
+#headish h2{
+  color: white;
+  font-weight: 100;
+  position: relative;
+  margin-top: 9vh;
+  margin-left: 2vw;
+}
+
+#footerish {
+  height: auto;
+  color: white;
+  background-color: rgb(137, 138, 122);
+  bottom: 0px;
+  position: fixed;
+  width: 100vw;
+}
+
+#footerish h2 {
+  padding-top: .5%;
+  margin-left: 5%;
+}
+
+body {
+  background-color: rgb(240, 240, 240);
+}