diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..b029d6a Binary files /dev/null and b/.DS_Store differ diff --git a/images/division_bell.jpg b/images/the_division_bell.jpg similarity index 100% rename from images/division_bell.jpg rename to images/the_division_bell.jpg diff --git a/index.css b/index.css new file mode 100644 index 0000000..0b1090b --- /dev/null +++ b/index.css @@ -0,0 +1,112 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.container{ + width: 100%; +} + +.splashHead{ + height: 50px; + background-color: #9A9B8D; + border-bottom: 2px solid black; +} + +.splashLeft{ + height: 710px; + background-color: #EEEEEE; +} + +.splashTitle{ + margin-top: 200px; + text-align: center; +} + +.splashTitle span{ + color: #693D76; + font-size: 84px; + font-family: sans-serif; + font-weight: 100; + +} + +.splashButton{ + background-color: #343525; + color: #EEEEEE; + padding: 8px 20px; + text-align: center; + display: inline-block; + font-size: 23px; + font-family: sans-serif; + font-weight: 100; + border-radius: 5px; + height: 50px; +} + + +a { + color: inherit; +} + +a:hover{ + color: #EEEEEE; + text-decoration: none; +} + +.splashRight{ + height:710px; +} + +.splashRight span img{ + position: relative; + margin-left: -15px; + height:710px; + width: 104.4%; + opacity: 0.19; + z-index: 1; +} + +.splashAlbumArt{ + position: absolute; + height:225px; + width:225px; + z-index: 2; + margin-left: 35%; +} + +.artOne{ + top:8px; +} + +.artTwo{ + top:243px; +} + +.artThree{ + top:478px; +} + +.albumArt{ + width: 225px; + height: 225px; + margin-left: -15px; +} + +.splashFoot{ + height: 50px; + background-color: #67675B; + border-top: 2px solid black; + position: relative; +} + +.splashFoot span{ + color: white; + font-size: 20px; + font-weight: 200; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 5%; +} diff --git a/index.html b/index.html index 8e0abfd..2c9d8f1 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,65 @@ - - - - - - - - + + + + Track Bin + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ track bin +
+
+ choose tracks +
+
+
+
+ railroad +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ © 2017 kyle barker +
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 0000000..117d435 --- /dev/null +++ b/index.js @@ -0,0 +1,37 @@ +$(document).ready(function() { + console.log("ready!"); + + $(window).load(function() { + $.get("https://lit-fortress-6467.herokuapp.com/object", function(data) { + + var dataArray = data["results"]; + console.log(dataArray) + var coverArtArray = []; + + //push to art array + for(var i = 0; i < dataArray.length; i++){ + var coverArt = dataArray[i]["cover_art"]; + coverArtArray.push(coverArt); + } + //make random piece of art + var randomArtOne = coverArtArray[Math.floor(Math.random()*coverArtArray.length)]; + var randomArtTwo = coverArtArray[Math.floor(Math.random()*coverArtArray.length)]; + var randomArtThree = coverArtArray[Math.floor(Math.random()*coverArtArray.length)]; + + //make sure we don't have duplicates on the art + while(randomArtOne === randomArtTwo || randomArtOne === randomArtThree || randomArtTwo === randomArtThree){ + randomArtTwo = coverArtArray[Math.floor(Math.random()*coverArtArray.length)]; + randomArtThree = coverArtArray[Math.floor(Math.random()*coverArtArray.length)]; + } + + var imageOneString = './images/' + randomArtOne; + var imageTwoString = './images/' + randomArtTwo; + var imageThreeString = './images/' + randomArtThree; + + + $("#pictureOne").attr('src', imageOneString); + $("#pictureTwo").attr('src', imageTwoString); + $("#pictureThree").attr('src', imageThreeString); + }); + }); +}); diff --git a/playPage.css b/playPage.css new file mode 100644 index 0000000..60e6f97 --- /dev/null +++ b/playPage.css @@ -0,0 +1,135 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.container{ + width: 100%; +} + +.playHead{ + height: 100px; + background-color: #9A9B8D; +} + +.playHead span{ + display: inline-block; + position: relative; + color: #EEEEEE; + font-size: 30px; + font-family: sans-serif; + font-weight: 100; + padding-left: 5%; + padding-top: 55px; +} + +.trackSelector{ + height: 150px; + overflow: auto; + white-space: nowrap; + overflow-x: scroll; +} + +.artList { + color: #EEEEEE; + display: inline-block; + height: 100px; + width: 110%; + margin-top: 20px; + margin-left: 25px; +} + +.albumArt{ + height: 100px; + width: 100px; + margin-left: 30px; + cursor: pointer; +} + +.selectedTracks{ + height:270px; + background-color: #EEEEEE; + border: solid 4px black; + display: inline-block; + margin-top: 30px; + overflow: scroll; +} + +.trackInfo{ + font-size: 20px; + margin-left: -10px; +} + + +.clearAndSubmitRow{ + height:175px; + display: inline-block; + margin-top: 30px; +} + +.clearButton { + cursor: pointer; +} +.clearButton span{ + background-color: #343525; + color: #EEEEEE; + padding: 8px 20px; + text-align: center; + display: inline-block; + font-size: 23px; + font-family: sans-serif; + font-weight: 100; + border-radius: 5px; + height: 50px; + width: 90%; + margin-left: -15px; +} + +.submitButton { + cursor: pointer; +} + +.submitButton span{ + background-color: #343525; + color: #EEEEEE; + padding: 8px 20px; + text-align: center; + display: inline-block; + font-size: 23px; + font-family: sans-serif; + font-weight: 100; + border-radius: 5px; + height: 50px; + width: 90%; + margin-left: -45px; +} + +.playFoot{ + height: 50px; + background-color: #67675B; + position: relative; +} + +.playFoot span{ + color: white; + font-size: 20px; + font-weight: 200; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 5%; +} + +.trackSelector::-webkit-scrollbar { + width: 1em; +} + +.trackSelector::-webkit-scrollbar-track { + background-color: #EEEEEE; +} + +.trackSelector::-webkit-scrollbar-thumb { + background-color: darkgrey; + border-radius: 7px; +} diff --git a/playPage.html b/playPage.html new file mode 100644 index 0000000..f5f7dac --- /dev/null +++ b/playPage.html @@ -0,0 +1,67 @@ + + + + + + Playlist + + + + + + + + + + + + + + + + + + + + + +
+
+
+ click an album to add its tracks to the bin +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ clear tracks +
+
+ submit bin +
+
+
+
+
+
+ © 2017 kyle barker +
+
+
+ + + diff --git a/playPage.js b/playPage.js new file mode 100644 index 0000000..a38a35b --- /dev/null +++ b/playPage.js @@ -0,0 +1,50 @@ +$(document).ready(function() { + console.log("ready!"); + + + $(window).load(function() { + $.get("https://lit-fortress-6467.herokuapp.com/object", function(data) { + var dataArray = data["results"]; + + for (var i = 0; i < dataArray.length; i++) { + var coverArt = dataArray[i]["cover_art"]; + var img = $('').attr({ + 'id': dataArray[i]["id"], + 'src': './images/' + coverArt, + 'class': 'albumArt', + }).appendTo('.artList'); + } + + $('.albumArt').click(function(e) { + var targetID = e.target["id"] + for (var i = 0; i < dataArray.length; i++) { + if (targetID == dataArray[i]["id"]) { + var artist = dataArray[i]["artist"] + var album = dataArray[i]["title"] + var boxData = artist + ": " + album; + $('.selectedTracks').append( + $('
') + .addClass("trackInfo") + .text(boxData) + ); + } + } + }); + + $('.clearButton').click(function() { + $('.selectedTracks').empty(); + }); + + + $('.submitButton').click(function() { + var myPlaylist = $(".selectedTracks").text(); + + $.post("https://lit-fortress-6467.herokuapp.com/post", { playlist: myPlaylist }, function(data) { + console.log("Data: " + data); + }); + }); + + + }); + }); +});