From 536c0ce651ff4ce334b9e32b167118fb13470276 Mon Sep 17 00:00:00 2001 From: vinniiotchkov Date: Fri, 2 Jun 2017 16:10:10 -0700 Subject: [PATCH] Complete Project --- .DS_Store | Bin 0 -> 8196 bytes cats.js | 24 +++ images/.DS_Store | Bin 0 -> 6148 bytes ...ivision_bell.jpg => the_division_bell.jpg} | Bin index.html | 85 ++++++-- playlist.html | 69 +++++++ script.js | 101 +++++++++ style.css | 192 ++++++++++++++++++ 8 files changed, 459 insertions(+), 12 deletions(-) create mode 100644 .DS_Store create mode 100644 cats.js create mode 100644 images/.DS_Store rename images/{division_bell.jpg => the_division_bell.jpg} (100%) create mode 100644 playlist.html create mode 100644 script.js create mode 100644 style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2b4c76258b9658e6d42710d3d3db137613c9096a GIT binary patch literal 8196 zcmeI1&u-H|5XNWQw6Q@z4oJ<>7bFf*ln_Lb5K;)~p$8;H5F7xtb{!gnV@I*mw1l8s zcnEj^BzO~^fCu3L;M+fq5<9&{sLV*a-)48l8~=7~XB;9Dt&v|RDie`~BDHiC)e4j2 zvgB;T^jwDu#1mEN9VPo=eB^~WZ|-0MOn?b60Vco%{sjVfW=pd!c<$>_u9*N6_%8{_ z`-6ibwP|#wRoyyJsT2TOK({iqkq4+4$7s{&OsfjTF?IGJOsFs^hS1>{cceSCX>_Jl zhm+9ZB+SghWGF(-jyOlTlW1z?nh7w0JOP=z7wL#xN-0^)-(wFWxR})S_T!H-6~0Ap zDW*vJ>rDULlOACF_G(XWoD95BdH(bUVUVP?+Ap!OS=ibxTDEQ3*Q__4UOeukZaPX@ z?(miR6!=}ww4cXuIB&b&i=aC`DBXMz6^~$KzH!iu^!gsn_mLE6!whw^niPHttQQmbG)M{&4@WfA(SWar)_tI$aXxjzc%}=Xw1V ztpyk-onaKl(J^{u#5M)g2i9Zi=0JVN_#&t!-^+?>=_E6-t^igUX9RGJNVknmmbBt(+dGgCB_xrbn z{cgiA6LDD=bH%AC06hDSs!dag z3026B?00c&-{mEWa{#3OlJ$TNfHqaJaX?cedR=ux8qw1tiq)86a+MdOVO|V3qTR8J z4Cu3K;T%1j;SuZ4PhW})>gkt>Ex(Hi?onWl1#a+wXW9ilW8xF;FydIfp4!n-7UIOWdJ|&CdFXg+tPSZk+*VV4Z=z zaN5!Sf4P1Czn_ahGaB Yf1(3o8nFyW55<23j0QK(z@IYk4XPPxCjbBd literal 0 HcmV?d00001 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.html b/index.html index b82dcc4..2ccc1e7 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,76 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + Track Bin + + + + +
+ +
+
+ +
+ +
+
+

track bin

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

© 2017 Vinnii Otchkov

+
+
+ +
+ + + diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..5c96ac2 --- /dev/null +++ b/playlist.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + Choose Tracks + + + + +
+ +
+
+ +

+ click an album to add its tracks to the bin +

+
+ +
+
+
+ + +
+
+
+

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

© 2017 Vinnii Otchkov

+
+
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..b94f07c --- /dev/null +++ b/script.js @@ -0,0 +1,101 @@ +$(document).ready(function() { + console.log("ready!"); + + var albumArr = []; + + albumArr[0] = { + src: "images/21.jpg" + }; + + + albumArr[1] = { + src: "images/ghost_in_the_machine.jpg" + }; + + + albumArr[2] = { + src: "images/red.jpg" + }; + + albumArr[3] = { + src: "images/the_division_bell.jpg" + }; + + albumArr[4] = { + src: "images/thriller.jpg" + }; + + + $('#clrBtn').click(function() { + $('#textBox').val(''); + }); + + + $('#subBtn').click(function() { + $.post("https://lit-fortress-6467.herokuapp.com/post", function(data) { + alert(data); + }); + $('#textBox').val(''); + }) + + + + $.ajax({ + url: "https://lit-fortress-6467.herokuapp.com/object" + + }) + .done(function(data) { + var music = data.results; + + music.sort(function() { + return 0.5 - Math.random(); + }) + + music.splice(0, 2); + + music.forEach(function(f) { + $("#arty").append( + "" + + ) + }) + + }); + + + + $.ajax({ + url: "https://lit-fortress-6467.herokuapp.com/object" + + }) + .done(function(data) { + var music2 = data.results; + + music2.sort(function() { + return 0.5 - Math.random(); + }) + + music2.forEach(function(f) { + $("#midTop").append( + "" + ) + }) + + $('#midTop img').click(function(e){ + + var newSrc = event.target.getAttribute('src'); + + newSrc = newSrc.replace('images/',''); + + var albumInfo = music2.find(function(stuff){ + + if( stuff.cover_art === newSrc){ + $("#textBox").append('Artist: '+stuff.artist+ '\n'+'Title: ' +stuff.title +'\n' +'\n'); + }; + + }) + }) + }); + + +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a41e115 --- /dev/null +++ b/style.css @@ -0,0 +1,192 @@ +@font-face { + font-family: AvenirNextLTPro-Regular; + src: url(fonts/AvenirNextLTPro-Regular.otf); +} + +.container-fluid { + height: 100vh; + width: 100vw; + margin-left: auto; + margin-right: auto; + border: 1px solid black; + overflow:scroll; + font-family: AvenirNextLTPro-Regular; + padding: 0; + position: relative; +} + +#trackBin { + font-family: AvenirNextLTPro-Regular; + padding-top: 100px; + font-size: 80px; + color: #3C0055; +} + +.btns { + border-radius: 10px; + height: 50px; + width: 300px; + background-color: #2A2B20; + font-size: 25px; + color: white; + outline: none; + +} + +.btns:hover { + opacity: 0.75; + border-radius: 10px; + height: 50px; + width: 300px; + background-color: #2A2B20; + font-size: 25px; + color: white; + outline: none; + +} + + +#top { + height: 50px; + text-align: center; + border: 1px solid black; + background-color: #898A7A; +} + +#col1 { + text-align: center; + height: 600px; +} + +#col2 { + text-align: center; + height: 600px; + float: right; +} + + +#col2Inner { +position: absolute; +width: 50%; +height:85.6%; +background-image: url("resources/track.jpg"); +background-size: 600px; +opacity: 0.5; + +} + + +.covers{ + margin: 0px,auto; +} + +#track { + height: 85.5vh; + width: 48.7vw; + /*background-image: url("resources/track.jpg"); + background-size: 600px; + opacity: 0.5;*/ + +} + +#bottom { + height: 50px; + background-color: #555647; + vertical-align: bottom; + +} + +.bottomCont { + position:sticky; + bottom:7px; + font-size: 20px; + color: white; + text-align: left; + text-indent: 50px; +} + + +.albumImg{ + height:200px; + width:200px; + display: list-item; + float: right; + +} + +#arty{ + padding-right: 100px; + height: 30px; + width: 30px; + +} + +#arty img{ + height: 200px; + width: 200px; + padding-top: 19.5px; + padding-bottom: 20px; +margin-left: 185px; +} + +/* +------------------------------Playlist Page------------------------------------- +*/ + +#top2 { + height: 150px; + background-color: #898A7A; +} + +#top2Content { + position:absolute; + top: 110px; + text-indent: 50px; + font-size: 25px; + color: white; +} + +#midTop { + height: 150px; + background-color: white; +} + +#midTop img{ + height: 100px; + width: 100px; + margin-left: 130px; + margin-top: 20px; + +} + +#midBot { + text-align: center; + height: 350px; + background-color: white; +} + +#bottom2 { + height: 50px; + background-color: #898A7A; +} + +#textBox { + border: 2px solid black; + border-radius: 10px; + margin-left: auto; + margin-right: auto; + background-color: #EAEAEA; + top: 20px; + outline: none; +} + +#clrBtn{ + position:absolute; + left: 100px; + + } + + #subBtn{ + position:absolute; + left: 450px; + }