gSchool · ChrisHervois · Apr 27, 2018
diff --git a/21.jpg b/21.jpg
diff --git a/avenir.otf b/avenir.otf
diff --git a/ghost_in_the_machine.jpg b/ghost_in_the_machine.jpg
diff --git a/images/track.jpg b/images/track.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,67 @@
+@font-face {
+  font-family: avenir;
+  src: url(avenir.otf);
+}
+
+* {
+  font-family: avenir;
+  color: white;
+}
+
+h1 {
+  color: purple;
+}
+
+.header, .footer {
+  background-color: grey;
+  height: 40px;
+}
+
+.footer p {
+  margin-left: 50px;
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+.left {
+  text-align: center;
+  padding-top: 250px;
+}
+
+.right {
+  // border: 2px solid black;
+  height: 100vh;
+  position: relative;
+}
+
+.album-list {
+  // border: 2px solid gold;
+  height: 100%;
+  width: 50%;
+  padding-top: 25px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
+
+.album img {
+  height: 100%;
+  width: 100%;
+}
+
+.album {
+  // border: 2px solid green;
+  width: 66%;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+img.track {
+  height: 100%;
+  width: 100%;
+  opacity: 0.19;
+}
+
+body {
+  background: #f5f5f5;
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,45 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title></title>
-  </head>
-  <body>
-
-
-  </body>
+<html lang="en">
+
+<head>
+
+  <!--  Meta  -->
+  <meta charset="UTF-8" />
+  <title>Choose Tracks</title>
+
+  <!--  Styles  -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+
+  <div class="container-fluid">
+    <div class="row header fixed-top">
+
+    </div>
+    <div class="row">
+      <div class="col left">
+        <h1>track bin</h1>
+        <a href="main.html" class="btn btn-dark">choose tracks</a>
+      </div>
+      <div class="col right">
+        <img class="track" src="images/track.jpg" alt="">
+        <div class="album-list">
+          <div class="album"></div>
+          <div class="album"></div>
+          <div class="album"></div>
+        </div>
+
+      </div>
+    </div>
+    <div class="row footer fixed-bottom">
+      <p>© 2018 Chris Hervois</p>
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script src="index.js"></script>
+</body>
+
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,20 @@
+const album = document.querySelectorAll('.album');
+
+let index = [];
+while (index.length < 3) {
+  let num = Math.floor(Math.random() * 5);
+  if (index.indexOf(num) > -1) continue;
+  index[index.length] = num;
+}
+
+fetch("https://lit-fortress-6467.herokuapp.com/object")
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(data) {
+    for (let i = 0; i < index.length; i++) {
+      let img = document.createElement("img");
+      img.src = data.results[index[i]]["cover_art"];
+      album[i].appendChild(img);
+    }
+  });
diff --git a/main.css b/main.css
@@ -0,0 +1,50 @@
+@font-face {
+  font-family: avenir;
+  src: url(avenir.otf);
+}
+* {
+  font-family: avenir;
+  color: white;
+}
+.track-list p {
+  color: black;
+}
+.header {
+  background-color: grey;
+  height: 75px;
+  position: relative;
+}
+.header h3 {
+  position: absolute;
+  bottom: 0px;
+  left: 20px;
+}
+.footer {
+  background-color: grey;
+  height: 40px;
+}
+.footer p {
+  margin-left: 50px;
+  font-size: 20px;
+  margin-top: 10px;
+}
+.track-list {
+/*   border: 2px solid black; */
+  background-color: lightgoldenrodyellow;
+  height: 300px;
+  margin-top: 30px;
+  border: 2px solid black;
+}
+.album-list {
+  margin-top: 20px;
+
+}
+
+.cover img {
+  height: 100%;
+  width: 100%;
+}
+.btn {
+  margin-top: 20px;
+  margin-right: 20px;
+}
diff --git a/main.html b/main.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+
+  <!--  Meta  -->
+  <meta charset="UTF-8" />
+  <title>Playlist Page</title>
+
+  <!--  Styles  -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="main.css">
+
+</head>
+
+<body>
+
+  <div class="container-fluid">
+    <div class="row header">
+      <h3>click an album to add its tracks to the bin</h3>
+    </div>
+    <div class="row album-list">
+      <div class="col-1"></div>
+      <div class="col-2 cover"></div>
+      <div class="col-2 cover"></div>
+      <div class="col-2 cover"></div>
+      <div class="col-2 cover"></div>
+      <div class="col-2 cover"></div>
+      <div class="col-1"></div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-6 track-list">
+
+      </div>
+
+    </div>
+    <div class="row">
+      <div class="col-3"></div>
+      <div class="col-3">
+        <button type="button" id="clear" class="btn btn-dark">clear tracks</button>
+        <button type="button" id="submit" class="btn btn-dark">submit bin</button>
+      </div>
+      <div class="col-6"></div>
+    </div>
+    <div class="row footer fixed-bottom">
+      <p>© 2018 Chris Hervois</p>
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,44 @@
+const cover = document.querySelectorAll(".cover");
+const trackList = document.querySelector(".track-list");
+const clrBtn = document.querySelector("#clear");
+const sbmtBtn = document.querySelector("#submit");
+let choice = {};
+let url = "https://lit-fortress-6467.herokuapp.com/post";
+fetch("https://lit-fortress-6467.herokuapp.com/object")
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(data) {
+    let myAlbums = data.results;
+    for (let i = 0; i < myAlbums.length; i++) {
+      let img = document.createElement("img");
+      img.src = myAlbums[i]["cover_art"];
+      cover[i].appendChild(img);
+      cover[i].id = myAlbums[i]["id"];
+      cover[i].addEventListener("click", function() {
+        let ptag = document.createElement("p");
+        ptag.innerHTML = `${myAlbums[i]["artist"]}: ${myAlbums[i]["title"]}`;
+        trackList.appendChild(ptag);
+        choice[myAlbums[i]["artist"]] = myAlbums[i]["title"];
+      });
+    }
+  });
+
+clrBtn.addEventListener("click", function() {
+
+  trackList.innerHTML = '';
+  choice = {};
+
+});
+sbmtBtn.addEventListener("click", function() {
+  fetch(url, {
+    method: "POST", // or 'PUT'
+    body: JSON.stringify(choice), // data can be `string` or {object}!
+    headers: new Headers({
+      "Content-Type": "application/json"
+    })
+  })
+    .catch(error => console.error("Error:", error))
+    .then(response => console.log("Success:", response));
+    alert(`Selected tracks: ${trackList.innerText}`);
+});
diff --git a/red.jpg b/red.jpg
diff --git a/the_division_bell.jpg b/the_division_bell.jpg
diff --git a/thriller.jpg b/thriller.jpg
diff --git a/thriller.png b/thriller.png