diff --git a/21.jpg b/21.jpg new file mode 100644 index 0000000..1b18041 Binary files /dev/null and b/21.jpg differ diff --git a/avenir.otf b/avenir.otf new file mode 100755 index 0000000..263ae4c Binary files /dev/null and b/avenir.otf differ diff --git a/ghost_in_the_machine.jpg b/ghost_in_the_machine.jpg new file mode 100644 index 0000000..aff06be Binary files /dev/null and b/ghost_in_the_machine.jpg differ diff --git a/images/track.jpg b/images/track.jpg new file mode 100644 index 0000000..5365660 Binary files /dev/null and b/images/track.jpg differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..d4c604d --- /dev/null +++ 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 index 8e0abfd..0be3c6b 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,45 @@ - - - - - - - - - + + + + + + + Choose Tracks + + + + + + + + +
+
+ +
+
+
+

track bin

+ choose tracks +
+
+ +
+
+
+
+
+ +
+
+
+

© 2018 Chris Hervois

+
+
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..98c0d2d --- /dev/null +++ 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 new file mode 100644 index 0000000..7e37f61 --- /dev/null +++ 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 new file mode 100644 index 0000000..8c7e62d --- /dev/null +++ b/main.html @@ -0,0 +1,54 @@ + + + + + + + + Playlist Page + + + + + + + + + +
+
+

click an album to add its tracks to the bin

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+

© 2018 Chris Hervois

+
+
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..3507acf --- /dev/null +++ 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 new file mode 100644 index 0000000..b092f9e Binary files /dev/null and b/red.jpg differ diff --git a/the_division_bell.jpg b/the_division_bell.jpg new file mode 100644 index 0000000..9dd63b3 Binary files /dev/null and b/the_division_bell.jpg differ diff --git a/thriller.jpg b/thriller.jpg new file mode 100644 index 0000000..d103338 Binary files /dev/null and b/thriller.jpg differ diff --git a/thriller.png b/thriller.png new file mode 100644 index 0000000..3e8fb61 Binary files /dev/null and b/thriller.png differ