diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..2b4c762 Binary files /dev/null and b/.DS_Store differ diff --git a/cats.js b/cats.js new file mode 100644 index 0000000..d81bf79 --- /dev/null +++ b/cats.js @@ -0,0 +1,24 @@ +var cats =[ + +{name: "fluffy", age:22, type:"Siamevil"}, +{name: "jim", age:23, type:"unknown"}, +{name: "greg", age:24, type:"Neanderthal"}, +{name: "jeff", age:24, type:"Stupid"}, +] + +var my_cat = cats.find(function(cat){ +return cat.name=="fluffy"; +}) + +console.log("my cat is " ,my_cat); +console.log("my cat is " ,my_cat.name); +console.log("my cat is " ,my_cat.age); +console.log("my cat is " ,my_cat.type); + + +var fruits = ["apple","pear","mango","banana"] + +fruits.sort(function(){ + fruits.splice(); + return 0.5-Math.random() +}); diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..a9ca0de Binary files /dev/null and b/images/.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.html b/index.html index b82dcc4..2ccc1e7 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,76 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + Track Bin + + + + +
+ +
+
+ +
+ +
+
+

track bin

+ + +
+ +
+
+ +
+ +
+
+
+ + +
+
+
+ + + +
+ + +
+ + + 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 +

+
+ +
+
+
+ + +
+
+
+

+ + + + + +
+ +
+ + + +
+ + + + 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; + }