diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..54d564a Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/app.js b/app.js new file mode 100755 index 0000000..d2a50d5 --- /dev/null +++ b/app.js @@ -0,0 +1,69 @@ +var albumArt = $.get("http://0.0.0.0:8000/music.json"); +albumArt.done(function(data) { + var albumInfo = (data.results); + + //----------------------------------------------------------- + // RANDOMIZE ALBUM ORDER + for (var i = albumInfo.length - 1, j = 0, temp = null; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + temp = albumInfo[i]; + albumInfo[i] = albumInfo[j]; + albumInfo[j] = temp; + } + //------------------------------------------------------------ + + //------------------------------------------------------------ + //SORTS ALBUMS BY ARTIST AND ALBUM TITLE + var sortedAlbums = albumInfo.map(a => Object.assign({}, a)); + sortedAlbums = sortedAlbums.sort(function(a, b) { + if (a.artist < b.artist) { + return -1; + } else if (a.artist === b.artist) { + if (a.title < b.title) { + return -1; + } else { + return 1; + } + } else { + return 1; + } + }) + //------------------------------------------------------------- + + + for (i = 0; i < sortedAlbums.length; i++) { + $("#thumbnails").append(` +
+
+ `); + }; + $("#thumbnails .thumbnails").click(function() { + var infoForFind = $(event.target).attr("src").replace('images/', ''); + var found = albumInfo.find(function(value) { + return value.cover_art === infoForFind; + }); + $(".text").append(` + ${found.artist} - ${found.title}
+ `); + }); + for (var k = 0; k < 3; k++) { + var divID = "album" + (k + 1); + + $(".right").append(` +
+ +
+ `); + } + $("#clear-tracks").click(function() { + $(".text").empty(); + }); +}); +$("#submit-bin").click(function() { + var inputData = $(".text").val(); + console.log(inputData); + $.post("https://lit-fortress-6467.herokuapp.com/post", inputData, function() { + alert('got it'); + }) + $(".text").empty(); +}); diff --git a/images/21.jpg b/images/21.jpg old mode 100644 new mode 100755 diff --git a/images/2112.jpg b/images/2112.jpg new file mode 100755 index 0000000..0c9b360 Binary files /dev/null and b/images/2112.jpg differ diff --git a/images/a_farewell_to_kings.jpg b/images/a_farewell_to_kings.jpg new file mode 100755 index 0000000..e1980b9 Binary files /dev/null and b/images/a_farewell_to_kings.jpg differ diff --git a/images/all_that_you_cant_leave_behind.jpg b/images/all_that_you_cant_leave_behind.jpg new file mode 100755 index 0000000..4c6c2c8 Binary files /dev/null and b/images/all_that_you_cant_leave_behind.jpg differ diff --git a/images/caress_of_steel.jpg b/images/caress_of_steel.jpg new file mode 100755 index 0000000..2813d61 Binary files /dev/null and b/images/caress_of_steel.jpg differ diff --git a/images/clockwork_angels.jpg b/images/clockwork_angels.jpg new file mode 100755 index 0000000..3b0353a Binary files /dev/null and b/images/clockwork_angels.jpg differ diff --git a/images/color_and_the_shape.jpg b/images/color_and_the_shape.jpg new file mode 100755 index 0000000..646b0b4 Binary files /dev/null and b/images/color_and_the_shape.jpg differ diff --git a/images/counterparts.jpg b/images/counterparts.jpg new file mode 100755 index 0000000..d663bb3 Binary files /dev/null and b/images/counterparts.jpg differ diff --git a/images/empire.jpg b/images/empire.jpg new file mode 100755 index 0000000..3b9b7ba Binary files /dev/null and b/images/empire.jpg differ diff --git a/images/face_value.jpg b/images/face_value.jpg new file mode 100755 index 0000000..4b28605 Binary files /dev/null and b/images/face_value.jpg differ diff --git a/images/fly_by_night.jpg b/images/fly_by_night.jpg new file mode 100755 index 0000000..aee9579 Binary files /dev/null and b/images/fly_by_night.jpg differ diff --git a/images/genesis.jpg b/images/genesis.jpg new file mode 100755 index 0000000..11041a6 Binary files /dev/null and b/images/genesis.jpg differ diff --git a/images/ghost_in_the_machine.jpg b/images/ghost_in_the_machine.jpg old mode 100644 new mode 100755 diff --git a/images/grace_under_pressure.jpg b/images/grace_under_pressure.jpg new file mode 100755 index 0000000..447dc4e Binary files /dev/null and b/images/grace_under_pressure.jpg differ diff --git a/images/hemispheres.jpg b/images/hemispheres.jpg new file mode 100755 index 0000000..209f951 Binary files /dev/null and b/images/hemispheres.jpg differ diff --git a/images/hold_your_fire.jpg b/images/hold_your_fire.jpg new file mode 100755 index 0000000..dcbaf71 Binary files /dev/null and b/images/hold_your_fire.jpg differ diff --git a/images/human_clay.jpg b/images/human_clay.jpg new file mode 100755 index 0000000..fa9569f Binary files /dev/null and b/images/human_clay.jpg differ diff --git a/images/hysteria.jpg b/images/hysteria.jpg new file mode 100755 index 0000000..e6bf965 Binary files /dev/null and b/images/hysteria.jpg differ diff --git a/images/invisible_touch.jpg b/images/invisible_touch.jpg new file mode 100755 index 0000000..a4197ff Binary files /dev/null and b/images/invisible_touch.jpg differ diff --git a/images/kilroy_was_here.jpg b/images/kilroy_was_here.jpg new file mode 100755 index 0000000..e30ad45 Binary files /dev/null and b/images/kilroy_was_here.jpg differ diff --git a/images/leftoverture.jpg b/images/leftoverture.jpg new file mode 100755 index 0000000..04b1f82 Binary files /dev/null and b/images/leftoverture.jpg differ diff --git a/images/moving_pictures.jpg b/images/moving_pictures.jpg new file mode 100755 index 0000000..4f111fa Binary files /dev/null and b/images/moving_pictures.jpg differ diff --git a/images/my_own_prison.jpg b/images/my_own_prison.jpg new file mode 100755 index 0000000..89edb46 Binary files /dev/null and b/images/my_own_prison.jpg differ diff --git a/images/no_jacket_required.jpg b/images/no_jacket_required.jpg new file mode 100755 index 0000000..a59baea Binary files /dev/null and b/images/no_jacket_required.jpg differ diff --git a/images/permanent_waves.jpg b/images/permanent_waves.jpg new file mode 100755 index 0000000..db76f34 Binary files /dev/null and b/images/permanent_waves.jpg differ diff --git a/images/power_windows.jpg b/images/power_windows.jpg new file mode 100755 index 0000000..69cf9fa Binary files /dev/null and b/images/power_windows.jpg differ diff --git a/images/pyromania.jpg b/images/pyromania.jpg new file mode 100755 index 0000000..f410ddc Binary files /dev/null and b/images/pyromania.jpg differ diff --git a/images/red.jpg b/images/red.jpg old mode 100644 new mode 100755 diff --git a/images/roll_the_bones.jpg b/images/roll_the_bones.jpg new file mode 100755 index 0000000..8695f75 Binary files /dev/null and b/images/roll_the_bones.jpg differ diff --git a/images/rush.jpg b/images/rush.jpg new file mode 100755 index 0000000..4da2b94 Binary files /dev/null and b/images/rush.jpg differ diff --git a/images/secret_samadhi.jpg b/images/secret_samadhi.jpg new file mode 100755 index 0000000..fa9e8ac Binary files /dev/null and b/images/secret_samadhi.jpg differ diff --git a/images/signals.jpg b/images/signals.jpg new file mode 100755 index 0000000..621cca6 Binary files /dev/null and b/images/signals.jpg differ diff --git a/images/sixteen_stone.jpg b/images/sixteen_stone.jpg new file mode 100755 index 0000000..f17fd8a Binary files /dev/null and b/images/sixteen_stone.jpg differ diff --git a/images/slippery_when_wet.jpg b/images/slippery_when_wet.jpg new file mode 100755 index 0000000..b7d6c92 Binary files /dev/null and b/images/slippery_when_wet.jpg differ diff --git a/images/snakes_and_arrows.jpg b/images/snakes_and_arrows.jpg new file mode 100755 index 0000000..4711698 Binary files /dev/null and b/images/snakes_and_arrows.jpg differ diff --git a/images/test_for_echo.jpg b/images/test_for_echo.jpg new file mode 100755 index 0000000..edb0baf Binary files /dev/null and b/images/test_for_echo.jpg differ diff --git a/images/the_better_life.jpg b/images/the_better_life.jpg new file mode 100755 index 0000000..f40e41d Binary files /dev/null and b/images/the_better_life.jpg differ diff --git a/images/division_bell.jpg b/images/the_division_bell.jpg old mode 100644 new mode 100755 similarity index 100% rename from images/division_bell.jpg rename to images/the_division_bell.jpg diff --git a/images/the_joshua_tree.jpg b/images/the_joshua_tree.jpg new file mode 100755 index 0000000..003178f Binary files /dev/null and b/images/the_joshua_tree.jpg differ diff --git a/images/thriller.jpg b/images/thriller.jpg old mode 100644 new mode 100755 diff --git a/images/thriller.png b/images/thriller.png old mode 100644 new mode 100755 diff --git a/images/throwing_copper.jpg b/images/throwing_copper.jpg new file mode 100755 index 0000000..3521df7 Binary files /dev/null and b/images/throwing_copper.jpg differ diff --git a/images/vapor_trails.jpg b/images/vapor_trails.jpg new file mode 100755 index 0000000..714432e Binary files /dev/null and b/images/vapor_trails.jpg differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index b82dcc4..f2b0cd6 --- a/index.html +++ b/index.html @@ -1,15 +1,39 @@ - - - - - - - - + + + + + + + + + + +
+
+
+
+
+
+
+ track bin +
+ +
+
+
+
+
+
+
+ +
+ + diff --git a/mockups/playlist_page.png b/mockups/playlist_page.png old mode 100644 new mode 100755 diff --git a/mockups/playlist_stretch2.fw.png b/mockups/playlist_stretch2.fw.png old mode 100644 new mode 100755 diff --git a/mockups/splash_page.png b/mockups/splash_page.png old mode 100644 new mode 100755 diff --git a/music.json b/music.json new file mode 100755 index 0000000..c34a97d --- /dev/null +++ b/music.json @@ -0,0 +1,248 @@ +{ + "results": [{ + "id": 1, + "title": "Moving Pictures", + "artist": "Rush", + "cover_art": "moving_pictures.jpg" + }, + { + "id": 2, + "title": "The Joshua Tree", + "artist": "U2", + "cover_art": "the_joshua_tree.jpg" + }, + { + "id": 3, + "title": "Empire", + "artist": "Queensryche", + "cover_art": "empire.jpg" + }, + { + "id": 4, + "title": "All That You Can't Leave Behind", + "artist": "U2", + "cover_art": "all_that_you_cant_leave_behind.jpg" + }, + { + "id": 5, + "title": "Left Overture", + "artist": "Kansas", + "cover_art": "leftoverture.jpg" + }, + { + "id": 6, + "title": "Signals", + "artist": "Rush", + "cover_art": "signals.jpg" + }, + { + "id": 7, + "title": "The Colour and the Shape", + "artist": "Foo Fighters", + "cover_art": "color_and_the_shape.jpg" + }, + { + "id": 8, + "title": "Face Value", + "artist": "Phil Collins", + "cover_art": "face_value.jpg" + }, + { + "id": 9, + "title": "Genesis", + "artist": "Genesis", + "cover_art": "genesis.jpg" + }, + { + "id": 10, + "title": "Human Clay", + "artist": "Creed", + "cover_art": "human_clay.jpg" + }, + { + "id": 11, + "title": "Hysteria", + "artist": "Def Leppard", + "cover_art": "hysteria.jpg" + }, + { + "id": 12, + "title": "Invisible Touch", + "artist": "Genesis", + "cover_art": "invisible_touch.jpg" + }, + { + "id": 13, + "title": "Kilroy Was Here", + "artist": "Styx", + "cover_art": "kilroy_was_here.jpg" + }, + { + "id": 14, + "title": "My Own Prison", + "artist": "Creed", + "cover_art": "my_own_prison.jpg" + }, + { + "id": 15, + "title": "No Jacket Required", + "artist": "Phil Collins", + "cover_art": "no_jacket_required.jpg" + }, + { + "id": 16, + "title": "Pyromania", + "artist": "Def Leppard", + "cover_art": "pyromania.jpg" + }, + { + "id": 17, + "title": "Slippery When Wet", + "artist": "Bon Jovi", + "cover_art": "slippery_when_wet.jpg" + }, + { + "id": 18, + "title": "The Better Life", + "artist": "3 Doors Down", + "cover_art": "the_better_life.jpg" + }, + { + "id": 19, + "title": "Ghost in the Machine", + "artist": "The Police", + "cover_art": "ghost_in_the_machine.jpg" + }, + { + "id": 20, + "title": "Red", + "artist": "Black Uhuru", + "cover_art": "red.jpg" + }, + { + "id": 21, + "title": "The Division Bell", + "artist": "Pink Floyd", + "cover_art": "the_division_bell.jpg" + }, + { + "id": 22, + "title": "Thriller", + "artist": "Michael Jackson", + "cover_art": "thriller.jpg" + }, + { + "id": 23, + "title": "21", + "artist": "Adele", + "cover_art": "21.jpg" + }, + { + "id": 24, + "title": "Vapor Trails", + "artist": "Rush", + "cover_art": "vapor_trails.jpg" + }, + { + "id": 25, + "title": "Snakes and Arrows", + "artist": "Rush", + "cover_art": "snakes_and_arrows.jpg" + }, + { + "id": 26, + "title": "Roll the Bones", + "artist": "Rush", + "cover_art": "roll_the_bones.jpg" + }, + { + "id": 27, + "title": "Hold Your Fire", + "artist": "Rush", + "cover_art": "hold_your_fire.jpg" + }, + { + "id": 28, + "title": "Caress of Steel", + "artist": "Rush", + "cover_art": "caress_of_steel.jpg" + }, + { + "id": 29, + "title": "Counterparts", + "artist": "Rush", + "cover_art": "counterparts.jpg" + }, + { + "id": 30, + "title": "Hemispheres", + "artist": "Rush", + "cover_art": "hemispheres.jpg" + }, + { + "id": 31, + "title": "Power Windows", + "artist": "Rush", + "cover_art": "power_windows.jpg" + }, + { + "id": 32, + "title": "Clockwork Angels", + "artist": "Rush", + "cover_art": "clockwork_angels.jpg" + }, + { + "id": 33, + "title": "Fly by Night", + "artist": "Rush", + "cover_art": "fly_by_night.jpg" + }, + { + "id": 34, + "title": "A Farewell to Kings", + "artist": "Rush", + "cover_art": "a_farewell_to_kings.jpg" + }, + { + "id": 35, + "title": "Test for Echo", + "artist": "Rush", + "cover_art": "test_for_echo.jpg" + }, + { + "id": 36, + "title": "Grace Under Pressure", + "artist": "Rush", + "cover_art": "grace_under_pressure.jpg" + }, + { + "id": 37, + "title": "Permanent Waves", + "artist": "Rush", + "cover_art": "permanent_waves.jpg" + }, + { + "id": 38, + "title": "2112", + "artist": "Rush", + "cover_art": "2112.jpg" + }, + { + "id": 39, + "title": "Secret Samadhi", + "artist": "Live", + "cover_art": "secret_samadhi.jpg" + }, { + "id": 40, + "title": "Throwing Copper", + "artist": "Live", + "cover_art": "throwing_copper.jpg" + }, + { + "id": 41, + "title": "Sixteen Stone", + "artist": "Bush", + "cover_art": "sixteen_stone.jpg" + } + ] +} diff --git a/object/music.json b/object/music.json new file mode 100755 index 0000000..c34a97d --- /dev/null +++ b/object/music.json @@ -0,0 +1,248 @@ +{ + "results": [{ + "id": 1, + "title": "Moving Pictures", + "artist": "Rush", + "cover_art": "moving_pictures.jpg" + }, + { + "id": 2, + "title": "The Joshua Tree", + "artist": "U2", + "cover_art": "the_joshua_tree.jpg" + }, + { + "id": 3, + "title": "Empire", + "artist": "Queensryche", + "cover_art": "empire.jpg" + }, + { + "id": 4, + "title": "All That You Can't Leave Behind", + "artist": "U2", + "cover_art": "all_that_you_cant_leave_behind.jpg" + }, + { + "id": 5, + "title": "Left Overture", + "artist": "Kansas", + "cover_art": "leftoverture.jpg" + }, + { + "id": 6, + "title": "Signals", + "artist": "Rush", + "cover_art": "signals.jpg" + }, + { + "id": 7, + "title": "The Colour and the Shape", + "artist": "Foo Fighters", + "cover_art": "color_and_the_shape.jpg" + }, + { + "id": 8, + "title": "Face Value", + "artist": "Phil Collins", + "cover_art": "face_value.jpg" + }, + { + "id": 9, + "title": "Genesis", + "artist": "Genesis", + "cover_art": "genesis.jpg" + }, + { + "id": 10, + "title": "Human Clay", + "artist": "Creed", + "cover_art": "human_clay.jpg" + }, + { + "id": 11, + "title": "Hysteria", + "artist": "Def Leppard", + "cover_art": "hysteria.jpg" + }, + { + "id": 12, + "title": "Invisible Touch", + "artist": "Genesis", + "cover_art": "invisible_touch.jpg" + }, + { + "id": 13, + "title": "Kilroy Was Here", + "artist": "Styx", + "cover_art": "kilroy_was_here.jpg" + }, + { + "id": 14, + "title": "My Own Prison", + "artist": "Creed", + "cover_art": "my_own_prison.jpg" + }, + { + "id": 15, + "title": "No Jacket Required", + "artist": "Phil Collins", + "cover_art": "no_jacket_required.jpg" + }, + { + "id": 16, + "title": "Pyromania", + "artist": "Def Leppard", + "cover_art": "pyromania.jpg" + }, + { + "id": 17, + "title": "Slippery When Wet", + "artist": "Bon Jovi", + "cover_art": "slippery_when_wet.jpg" + }, + { + "id": 18, + "title": "The Better Life", + "artist": "3 Doors Down", + "cover_art": "the_better_life.jpg" + }, + { + "id": 19, + "title": "Ghost in the Machine", + "artist": "The Police", + "cover_art": "ghost_in_the_machine.jpg" + }, + { + "id": 20, + "title": "Red", + "artist": "Black Uhuru", + "cover_art": "red.jpg" + }, + { + "id": 21, + "title": "The Division Bell", + "artist": "Pink Floyd", + "cover_art": "the_division_bell.jpg" + }, + { + "id": 22, + "title": "Thriller", + "artist": "Michael Jackson", + "cover_art": "thriller.jpg" + }, + { + "id": 23, + "title": "21", + "artist": "Adele", + "cover_art": "21.jpg" + }, + { + "id": 24, + "title": "Vapor Trails", + "artist": "Rush", + "cover_art": "vapor_trails.jpg" + }, + { + "id": 25, + "title": "Snakes and Arrows", + "artist": "Rush", + "cover_art": "snakes_and_arrows.jpg" + }, + { + "id": 26, + "title": "Roll the Bones", + "artist": "Rush", + "cover_art": "roll_the_bones.jpg" + }, + { + "id": 27, + "title": "Hold Your Fire", + "artist": "Rush", + "cover_art": "hold_your_fire.jpg" + }, + { + "id": 28, + "title": "Caress of Steel", + "artist": "Rush", + "cover_art": "caress_of_steel.jpg" + }, + { + "id": 29, + "title": "Counterparts", + "artist": "Rush", + "cover_art": "counterparts.jpg" + }, + { + "id": 30, + "title": "Hemispheres", + "artist": "Rush", + "cover_art": "hemispheres.jpg" + }, + { + "id": 31, + "title": "Power Windows", + "artist": "Rush", + "cover_art": "power_windows.jpg" + }, + { + "id": 32, + "title": "Clockwork Angels", + "artist": "Rush", + "cover_art": "clockwork_angels.jpg" + }, + { + "id": 33, + "title": "Fly by Night", + "artist": "Rush", + "cover_art": "fly_by_night.jpg" + }, + { + "id": 34, + "title": "A Farewell to Kings", + "artist": "Rush", + "cover_art": "a_farewell_to_kings.jpg" + }, + { + "id": 35, + "title": "Test for Echo", + "artist": "Rush", + "cover_art": "test_for_echo.jpg" + }, + { + "id": 36, + "title": "Grace Under Pressure", + "artist": "Rush", + "cover_art": "grace_under_pressure.jpg" + }, + { + "id": 37, + "title": "Permanent Waves", + "artist": "Rush", + "cover_art": "permanent_waves.jpg" + }, + { + "id": 38, + "title": "2112", + "artist": "Rush", + "cover_art": "2112.jpg" + }, + { + "id": 39, + "title": "Secret Samadhi", + "artist": "Live", + "cover_art": "secret_samadhi.jpg" + }, { + "id": 40, + "title": "Throwing Copper", + "artist": "Live", + "cover_art": "throwing_copper.jpg" + }, + { + "id": 41, + "title": "Sixteen Stone", + "artist": "Bush", + "cover_art": "sixteen_stone.jpg" + } + ] +} diff --git a/playlist.html b/playlist.html new file mode 100755 index 0000000..bc30d43 --- /dev/null +++ b/playlist.html @@ -0,0 +1,36 @@ + + + + + + Playlist + + + + + + + +
+
+
+ click an album to add its tracks to the bin +
+
+
+ +
+
+
+ + +
+
+
+ + + + diff --git a/resources/track.fw.png b/resources/track.fw.png old mode 100644 new mode 100755 diff --git a/resources/track.jpg b/resources/track.jpg old mode 100644 new mode 100755 diff --git a/style.css b/style.css new file mode 100755 index 0000000..c234527 --- /dev/null +++ b/style.css @@ -0,0 +1,187 @@ +body +{ + font-family: Avenir; + + margin: 0; + padding: 0; +} +.container +{ + width: 100vw; + height: 100vh; +} +header +{ + width: 100%; + height: 5%; + margin: 0; + padding: 0; + position: relative; + + color: white; + background-color: #9b9b8c; +} +.header-text { + width: 70%; + position: absolute; + bottom: 0px; + left: 50px; + font-size: 20px; +} +main +{ + display: block; + + height: 90%; +} +.left +{ + position: relative; + + float: left; + + width: 50%; + height: 100%; + + background-color: #eee; +} +.right +{ + position: relative; + top: 0; + left: 50%; + + width: 50%; + height: 100%; +} +.album_list +{ + height: 100%; + + opacity: .19; + background: url('resources/track.jpg'); + background-size: cover; +} +img +{ + height: 180px; +} + +#album1 +{ + position: absolute; + top: 10%; + left: 40%; +} +#album2 +{ + position: absolute; + top: 40%; + left: 40%; +} +#album3 +{ + position: absolute; + top: 70%; + left: 40%; +} +footer +{ + font-size: 1.1em; + + position: fixed; + bottom: 0; + + width: 100%; + height: 5%; + + color: white; + background-color: #686859; +} +.footer_text +{ + font-size: 1.1em; + + position: absolute; + left: 75px; + + width: 200px; + + text-align: center; +} +.trackbin +{ + position: absolute; + top: 40%; + left: 35%; + + width: 200px; + height: 100px; + margin: 0 auto; +} +.trackbin-text +{ + font-size: 50px; + + color: #490063; +} +button +{ + font-size: 25px; + + width: 180px; + + color: white; + border-radius: 5px; + background-color: #353526; +} +button:hover +{ + background-color: #9b9b8c; +} + +/* +ADDITIONAL STYLING FOR PLAYLIST.HTML +*/ +#thumbnails +{ + position: relative; + + width: 50%; + height: 28%; + margin: 40px auto; + white-space: nowrap; + overflow-x: scroll; + +} +.thumbnails +{ + display: inline-block; + + margin: 0px 10px; + +} + +.text { + width: 40%; + height: 30%; + border: 1px solid black; + margin: 0px auto; + font-size: 22px; + overflow: auto; +} + +.button-row { + width: 25%; + margin: 0px auto; +} + + + + +@font-face +{ + font-family: Avenir; + + src: 'fonts/AvenirNextLTPro-Regular.otf'; +}