From 6454bae7cb54c097f20478d210ccb86badd704b5 Mon Sep 17 00:00:00 2001 From: kylebarker Date: Thu, 13 Jul 2017 15:11:23 -0700 Subject: [PATCH 1/3] Module 1 Complete --- .DS_Store | Bin 0 -> 6148 bytes index.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 68 ++++++++++++++++++++++++++++---- index.js | 0 playPage.css | 90 ++++++++++++++++++++++++++++++++++++++++++ playPage.html | 61 ++++++++++++++++++++++++++++ playPage.js | 0 7 files changed, 318 insertions(+), 8 deletions(-) create mode 100644 .DS_Store create mode 100644 index.css create mode 100644 index.js create mode 100644 playPage.css create mode 100644 playPage.html create mode 100644 playPage.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b029d6a223cc426e8db3c0abe3efacb84c5817aa GIT binary patch literal 6148 zcmeHKJ5EC}5S)cbM50NV(pTUHR+O9|7eFLR1Lz?|>0iaUI2yB`g6NSh6hX7ndhGR% zEl=_GEdX1c_D{e9z?|-gPame{`|cCFtB4WlJmZ8991r{B?q!%{{~mDe1Ku%Uhu5F{ z;mx;XQa}nw0VyB_q`;LGr~*5Gyz;p^P6|kY+gHH94~_2F3&+Ixba03kfH-3~jPvLv zh|L4UUN|N)LbIe2lWNssSkf79mDdZ$#H7Qj`LMd#szb53o#(emhxJ5_Qa}ovD{!C7 zh1dTL{X+kLPSQ#WNP&N)fX&w1^@>lb+B$ih*V;yZrhCp8-Hr30aENkDjB?C{m*Zt5 bWnS|+_j}=(7<9&iPSnqU>mri^f33hb#rqYl literal 0 HcmV?d00001 diff --git a/index.css b/index.css new file mode 100644 index 0000000..16d7071 --- /dev/null +++ b/index.css @@ -0,0 +1,107 @@ +* { + 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%; + background-color: #EEEEEE; +} + +.artOne{ + top:8px; +} + +.artTwo{ + top:243px; +} + +.artThree{ + top:478px; +} + +.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..ab3edfc 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,63 @@ - - - - - - - - + + + + Track Bin + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ track bin +
+
+ choose tracks +
+
+
+
+ railroad +
+
+
+
+
+
+
+
+
+
+
+
+ © 2017 kyle barker +
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 0000000..e69de29 diff --git a/playPage.css b/playPage.css new file mode 100644 index 0000000..539b521 --- /dev/null +++ b/playPage.css @@ -0,0 +1,90 @@ +* { + 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; + background-color: blue; +} + +.selectedTracks{ + height:270px; + background-color: #EEEEEE; + border: solid 4px black; + display: inline-block; + margin-top: 30px; +} + +.clearAndSubmitRow{ + height:175px; + display: inline-block; + margin-top: 30px; +} + +.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: 250px; + margin-left: -15px; +} + +.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: 250px; + 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%; +} diff --git a/playPage.html b/playPage.html new file mode 100644 index 0000000..fb583ba --- /dev/null +++ b/playPage.html @@ -0,0 +1,61 @@ + + + + + + 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..e69de29 From e65444bb0cb066cb990a3c8cd4347f0e286c1f81 Mon Sep 17 00:00:00 2001 From: kylebarker Date: Fri, 14 Jul 2017 11:31:25 -0700 Subject: [PATCH 2/3] Most of the project complete except for the post --- index.css | 7 ++++++- index.html | 10 ++++++---- index.js | 37 +++++++++++++++++++++++++++++++++++++ playPage.css | 38 +++++++++++++++++++++++++++++++++++--- playPage.html | 14 +++++++++----- playPage.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 140 insertions(+), 13 deletions(-) diff --git a/index.css b/index.css index 16d7071..0b1090b 100644 --- a/index.css +++ b/index.css @@ -74,7 +74,6 @@ a:hover{ width:225px; z-index: 2; margin-left: 35%; - background-color: #EEEEEE; } .artOne{ @@ -89,6 +88,12 @@ a:hover{ top:478px; } +.albumArt{ + width: 225px; + height: 225px; + margin-left: -15px; +} + .splashFoot{ height: 50px; background-color: #67675B; diff --git a/index.html b/index.html index ab3edfc..2c9d8f1 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,9 @@ Track Bin + + + @@ -15,10 +18,6 @@ - - - - @@ -44,10 +43,13 @@ railroad
+
+
+
diff --git a/index.js b/index.js index e69de29..117d435 100644 --- a/index.js +++ 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 index 539b521..573adad 100644 --- a/playPage.css +++ b/playPage.css @@ -26,7 +26,26 @@ .trackSelector{ height: 150px; - background-color: blue; + overflow: auto; + white-space: nowrap; + background-color: #EEEEEE; + 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{ @@ -37,12 +56,21 @@ margin-top: 30px; } +.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; @@ -54,10 +82,14 @@ font-weight: 100; border-radius: 5px; height: 50px; - width: 250px; + width: 90%; margin-left: -15px; } +.submitButton { + cursor: pointer; +} + .submitButton span{ background-color: #343525; color: #EEEEEE; @@ -69,7 +101,7 @@ font-weight: 100; border-radius: 5px; height: 50px; - width: 250px; + width: 90%; margin-left: -45px; } diff --git a/playPage.html b/playPage.html index fb583ba..f933192 100644 --- a/playPage.html +++ b/playPage.html @@ -5,6 +5,10 @@ Playlist + + + + @@ -15,10 +19,6 @@ - - - - @@ -32,6 +32,10 @@
+
+
+
+
@@ -40,7 +44,7 @@
-
+
clear tracks
diff --git a/playPage.js b/playPage.js index e69de29..c6d3056 100644 --- a/playPage.js +++ b/playPage.js @@ -0,0 +1,47 @@ +$(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) + + //push to art array + 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() { + + }); + + + }); + }); +}); From 50eaa00e08d3e8d44f3994181465cca58d6e5d15 Mon Sep 17 00:00:00 2001 From: kylebarker Date: Fri, 14 Jul 2017 14:20:52 -0700 Subject: [PATCH 3/3] Kyle's Playlist Assessment --- .../{division_bell.jpg => the_division_bell.jpg} | Bin playPage.css | 15 ++++++++++++++- playPage.html | 2 ++ playPage.js | 9 ++++++--- 4 files changed, 22 insertions(+), 4 deletions(-) rename images/{division_bell.jpg => the_division_bell.jpg} (100%) 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/playPage.css b/playPage.css index 573adad..60e6f97 100644 --- a/playPage.css +++ b/playPage.css @@ -28,7 +28,6 @@ height: 150px; overflow: auto; white-space: nowrap; - background-color: #EEEEEE; overflow-x: scroll; } @@ -54,6 +53,7 @@ border: solid 4px black; display: inline-block; margin-top: 30px; + overflow: scroll; } .trackInfo{ @@ -120,3 +120,16 @@ 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 index f933192..f5f7dac 100644 --- a/playPage.html +++ b/playPage.html @@ -9,6 +9,7 @@ + @@ -40,6 +41,7 @@
+
diff --git a/playPage.js b/playPage.js index c6d3056..a38a35b 100644 --- a/playPage.js +++ b/playPage.js @@ -5,9 +5,7 @@ $(document).ready(function() { $(window).load(function() { $.get("https://lit-fortress-6467.herokuapp.com/object", function(data) { var dataArray = data["results"]; - console.log(dataArray) - //push to art array for (var i = 0; i < dataArray.length; i++) { var coverArt = dataArray[i]["cover_art"]; var img = $('').attr({ @@ -37,8 +35,13 @@ $(document).ready(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); + }); });