From 69ece80b058c285a458c2a970d9474babaa73873 Mon Sep 17 00:00:00 2001 From: STEPHAN CHRISTOPHER HOLLY Date: Fri, 14 Jul 2017 15:01:15 -0700 Subject: [PATCH] first commit --- app.js | 73 ++++++++++ ...ivision_bell.jpg => the_division_bell.jpg} | Bin index.css | 130 ++++++++++++++++++ index.html | 31 ++++- secondpage.css | 110 +++++++++++++++ secondpage.html | 30 ++++ 6 files changed, 372 insertions(+), 2 deletions(-) create mode 100644 app.js rename images/{division_bell.jpg => the_division_bell.jpg} (100%) create mode 100644 index.css create mode 100644 secondpage.css create mode 100644 secondpage.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..0ca7734 --- /dev/null +++ b/app.js @@ -0,0 +1,73 @@ +$(document).ready(function() { + $.ajax({ + url: "https://lit-fortress-6467.herokuapp.com/object", success: function(result){ + var arr = []; + while(arr.length < 3){ + var randomnumber = Math.ceil(Math.random()*4); + if(arr.indexOf(randomnumber) > -1) continue; + arr[arr.length] = randomnumber; + } + var album = result.results[arr[0]].cover_art; + $('.album1').css({'background': `url(images/${album}) no-repeat`, "background-size": "100%"}); + var album = result.results[arr[1]].cover_art; + $('.album2').css({'background': `url(images/${album}) no-repeat`, "background-size": "100%"}); + var album = result.results[arr[2]].cover_art; + $('.album3').css({'background': `url(images/${album}) no-repeat`, "background-size": "100%"}); + + for (var i = 0; i < 5; i++) { + $('.album-scroll').append('
') + } + + for (var i = 0; i < 5; i++) { + var pic = result.results[i].cover_art; + $('#'+ i).css({'background': `url(images/${pic}) no-repeat`, "background-size": "100%"}); + } + var artInfo; + $(".sample").click(function() { + newId = $(this).attr('id'); + artInfo = result.results[newId].artist + ": " + result.results[newId].title + ",
"; + $('.info').append(artInfo) + }) + + $("button[name='button2']").click(function() { + $('.info').empty() + }) + + + $("button[name='button3']").click(function() { + var obj = {}; + var infoText = $('.info').text() + var arr1 = infoText.split(/[,:]+/) + for (var i = 0; i < arr1.length-1; i+= 2) { + obj[arr1[i]] = arr1[i+1].substring(1) + } + + $.ajax({ + type: "POST", + url: 'https://lit-fortress-6467.herokuapp.com/post', + data: {"obj" : JSON.stringify(obj)}, + cache: false, + success: function(result){ + alert(result); + } + }); + }) +}}); + + + + + + + + + + + + + + + + + +}); 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..8c1014c --- /dev/null +++ b/index.css @@ -0,0 +1,130 @@ +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + box-sizing: border-box; +} + +.main { + width: 100%; + height: 84vh; + position:relative; + top: 0; +} + +.text1 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.background1 { +background: url("resources/track.fw.png")no-repeat right; +filter: alpha(opacity=60); +/* IE */ +-moz-opacity: 0.6; +/* Mozilla */ +opacity: 0.6; +/* CSS3 */ +position: absolute; +top: 0; +left: 0; +height: 100%; +width: 100%; +background-size: 50%; +} + + +.header { + height: 8vh; + background-color: #9B9B8C; + width: 100%; +border-bottom: 1px solid black; +} + +.footer{ + height: 8vh; + background-color: #686859; + width: 100%; + position: absolute; + margin: 0 auto; +} + +.footer-text { + margin-top: 14px; + margin-left: 150px; + font-family: avenir; + font-size: 28px; + color: white; + font-weight: 100; +} + +.left { + height: 100%; + width: 50%; + position: fixed; + display: inline-block; + float: left; +} + +.track-bin { + position: relative; + text-align: center; + margin-top: 28vh; + font-size: 80px; + color: #4C0066; + font-family: avenir; + font-weight: 100; +} + +.button1 { + text-align: center; +} +button { + position: relative; + text-align: center; + margin-top: 2vh; + font-size: 36px; + background: #353526; + border-radius: 10px ; + font-family: avenir; + font-weight: 100; + color: white; + padding: 4px 40px 4px 40px; + +} + +.albums { + height: 100%; + width: 50%; + display: inline-block; + float: right; +} + + +.album1 { + height: 26vh; + width: 35%; + margin: 0 auto; + margin-top: 12px; +} + +.album2 { + height: 26vh; + width: 35%; + margin: 0 auto; + margin-top: 10px; +} + +.album3 { + height: 26vh; + width: 35%; + margin: 0 auto; + margin-top: 10px; +} diff --git a/index.html b/index.html index 8e0abfd..4d5e1a3 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,37 @@ - + Splash + + + - +
+
+
+
+
+
+
+

track bin

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

© 2017 Stephan Holly

+
+
diff --git a/secondpage.css b/secondpage.css new file mode 100644 index 0000000..0c623fa --- /dev/null +++ b/secondpage.css @@ -0,0 +1,110 @@ +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + box-sizing: border-box; +} + +.main { + width: 100%; + height: 73vh; + position:relative; + top: 0; +} + +.header { + height: 18vh; + background-color: #9B9B8C; + width: 100%; + +} + +.footer{ + height: 8vh; + background-color: #686859; + width: 100%; + position: absolute; + margin: 0 auto; +} + +.footer-text { + margin-top: 14px; + margin-left: 150px; + font-family: avenir; + font-size: 28px; + color: white; + font-weight: 100; +} + +.header-text { + padding-top: 95px; + margin-left: 150px; + font-family: avenir; + font-size: 36px; + color: white; + font-weight: 100; +} + + + +.album-scroll { + width:100%; + height:18vh; + margin-top: 10px; + margin-bottom: 10px; + left:0;right:0; + top:0;bottom:0; + overflow-y:hidden; + overflow-x: scroll; + white-space: nowrap; + text-align: center; +} + + +.sample { + height: 16vh; + width: 8%; + margin-left: 36px; + margin-right: 36px; + margin-top: 10px; + background-color: blue; + display: inline-block; + +} + +.info { + height: 28vh; + width: 79%; + margin: 0 auto; + border: 5px solid black; + background-color: #EEEEEE; + font-family: avenir; + font-size: 24px; + overflow-y: scroll; +} + +button { + position: relative; + text-align: center; + margin-top: 2vh; + font-size: 36px; + background: #353526; + border-radius: 10px ; + font-family: avenir; + font-weight: 100; + color: white; + padding: 4px 40px 4px 40px; +} + +button[name="button2"] { + margin-right: 30px; +} + +.btns { + display: inline-block; + margin-left: 150px; +} diff --git a/secondpage.html b/secondpage.html new file mode 100644 index 0000000..7fd38eb --- /dev/null +++ b/secondpage.html @@ -0,0 +1,30 @@ + + + + + Playlist + + + + + +
+
+

click an album to add its tracks to the bin

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

© 2017 Stephan Holly

+
+
+ +