diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..591e3d4 Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..9364f65 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/bloom.jpg b/images/bloom.jpg new file mode 100644 index 0000000..ee69d21 Binary files /dev/null and b/images/bloom.jpg differ diff --git a/images/bon_iver.jpg b/images/bon_iver.jpg new file mode 100644 index 0000000..052152c Binary files /dev/null and b/images/bon_iver.jpg differ diff --git a/images/cleopatra.jpg b/images/cleopatra.jpg new file mode 100644 index 0000000..8c8f910 Binary files /dev/null and b/images/cleopatra.jpg differ diff --git a/images/currents.jpg b/images/currents.jpg new file mode 100644 index 0000000..250461e Binary files /dev/null and b/images/currents.jpg differ diff --git a/images/daughter.jpg b/images/daughter.jpg new file mode 100644 index 0000000..29ee65a Binary files /dev/null and b/images/daughter.jpg differ diff --git a/images/flume.jpg b/images/flume.jpg new file mode 100644 index 0000000..e2e7240 Binary files /dev/null and b/images/flume.jpg differ diff --git a/images/in_return.jpg b/images/in_return.jpg new file mode 100644 index 0000000..eaed498 Binary files /dev/null and b/images/in_return.jpg differ diff --git a/images/naked_famous.jpg b/images/naked_famous.jpg new file mode 100644 index 0000000..352f831 Binary files /dev/null and b/images/naked_famous.jpg differ diff --git a/images/pharmacy.jpg b/images/pharmacy.jpg new file mode 100644 index 0000000..36481d9 Binary files /dev/null and b/images/pharmacy.jpg differ diff --git a/images/purity_ring.jpg b/images/purity_ring.jpg new file mode 100644 index 0000000..e37dd9e Binary files /dev/null and b/images/purity_ring.jpg differ diff --git a/images/rise.jpg b/images/rise.jpg new file mode 100644 index 0000000..23297a0 Binary files /dev/null and b/images/rise.jpg differ diff --git a/images/spreading_rumors.jpg b/images/spreading_rumors.jpg new file mode 100644 index 0000000..b85e1f4 Binary files /dev/null and b/images/spreading_rumors.jpg differ diff --git a/images/strfkr.jpg b/images/strfkr.jpg new file mode 100644 index 0000000..d7b9db4 Binary files /dev/null and b/images/strfkr.jpg 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/images/zaba.jpg b/images/zaba.jpg new file mode 100644 index 0000000..3eccfdf Binary files /dev/null and b/images/zaba.jpg differ diff --git a/images/zhu.jpg b/images/zhu.jpg new file mode 100644 index 0000000..371fb5e Binary files /dev/null and b/images/zhu.jpg differ diff --git a/index.html b/index.html index 8e0abfd..3c35172 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,44 @@ - + + + + Playlist - + +
+ + +
+ +
+ +
+
+ +
+

track bin

+ +
+ +
+
+
+ +
+
+ +
+
+ +
+
© 2017 Natalie Despain
+
+ +
+ diff --git a/index.js b/index.js new file mode 100644 index 0000000..18f5bd4 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +$(document).ready(function() { + + + function randomImgs() { + $.ajax({url: 'https://baroque-chaise-16357.herokuapp.com/api', success: function(result) { + + var randomIndexes = [] + while(randomIndexes.length < 3){ + var randomnumber = Math.ceil(Math.random()*result.results.length) - 1; + if(randomIndexes.indexOf(randomnumber) > -1) continue; + randomIndexes[randomIndexes.length] = randomnumber; + } + + for (var index of randomIndexes) { + var div = $("
").css({'background': `url('images/${result.results[index].cover_art}')`, 'background-size': 'cover'}); + $('.right-container').append(div); + } + + }}); + } + + randomImgs(); + + + + + +}) diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..b9bd6d9 --- /dev/null +++ b/playlist.html @@ -0,0 +1,58 @@ + + + + + + + + Playlist + + + +
+ + +
+

click an album to add it's tracks to bin

+
+ +
+ +
+
+
+
+ +
+
+
Add tracks from:
+
Click on an album!
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+ + +
+ +
+ +
+
© 2017 Natalie Despain
+
+ +
+ + + + diff --git a/playlist.js b/playlist.js new file mode 100644 index 0000000..acbf5bd --- /dev/null +++ b/playlist.js @@ -0,0 +1,116 @@ +$(document).ready(function() { + + + + $.ajax({url: 'https://baroque-chaise-16357.herokuapp.com/api', success: function(result) { + + // APPEND IMGS TO SLIDER + for (var i = 0; i < result.results.length; i++) { + var div = $(`
`).css({'background': `url('images/${result.results[i].cover_art}')`, 'background-size': 'cover'}); + $('.content').append(div); + } + + + // // ADD TEXT ON CLICK + // $('.scrollImg').click(function(e){ + // var id = Number(e.target.id); + // + // for (var item of result.results) { + // if (item.id === id) { + // var text = $(`
${item.artist}: ${item.title}
`); + // $('.box').append(text); + // } + // } + // + // }) + + // CHANGE CURRENT SELECTION + $('.scrollImg').click(function(e){ + $('.album-tracks').empty(); + var id = Number(e.target.id); + + for (var item of result.results) { + if (item.id === id) { + $('#current-album').text(`${item.artist}: ${item.title}`); + $('.current-album-image').css({'background': `url('images/${item.cover_art}')`, 'background-size': 'cover'}) + for (var i = 0; i < item.tracks.length; i++) { + var track = $(`
${item.tracks[i].title} - ${item.tracks[i].length}
`); + $('.album-tracks').append(track); + } + } + } + + }) + + // ADD SONG TO PLAYLIST + $('.album-tracks').click(function(e){ + if (e.target.localName === 'h6') { + var song = $(`
${e.target.innerText}
`); + $('.playlist-tracks').append(song); + } + }) + + }}); + + + + // CLEAR PLAYLIST + $('#clear').click(function() { + $('.playlist-tracks').empty(); + }) + + + // SUBMIT AND POST + $('#submit').click(function() { + + var collection = {}; + var htmlCollection = $('.playlist-tracks').children(); + for (var i = 0; i < htmlCollection.length; i++) { + var split = htmlCollection[i].innerHTML.split(" - "); + collection[split[0]] = split[1]; + } + + var jsonData = JSON.stringify(collection) + console.log(jsonData) + + $.ajax({ + type: "POST", + url: "https://lit-fortress-6467.herokuapp.com/post", + data: jsonData, + success: function(msg) { + console.log(msg); + } + }); + + }) + + + + // $('#submit').click(function() { + // + // var collection = {}; + // var htmlCollection = $('.box').children(); + // for (var i = 0; i < htmlCollection.length; i++) { + // var split = htmlCollection[i].innerHTML.split(": "); + // collection[split[0]] = split[1]; + // } + // + // var jsonData = JSON.stringify(collection) + // console.log(jsonData) + // + // $.ajax({ + // type: "POST", + // url: "https://lit-fortress-6467.herokuapp.com/post", + // data: jsonData, + // success: function(msg) { + // console.log(msg); + // } + // }); + // + // }) + + + + + +}) diff --git a/playliststyle.css b/playliststyle.css new file mode 100644 index 0000000..608680f --- /dev/null +++ b/playliststyle.css @@ -0,0 +1,167 @@ +@font-face { + font-family: "Avenir"; + src: url(fonts/AvenirNextLTPro-Regular.otf); +} + +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + box-sizing: border-box; +} + +body { + font-family: "Avenir"; +} + + +.container { + width: 100%; + background: white; +} + +/*HEADER*/ +.header { + width: 100vw; + height: 130px; + background: #9B9B8C; +} + + .header h1 { + color: white; + font-size: 2em; + font-weight: 300; + letter-spacing: 2px; + padding: 5.5% 0 0 5%; + } + + +/*CONTENT*/ +.body { + width: 100%; + height: 760px; + background: white; + position: relative; +} + + .body .slider { + width: 100%; + margin: 10px auto; + } + + .body .slider .content { + margin: 0 auto; + padding: 10px; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; + width: auto; + } + + .body .slider .content > div { + width: 100px; + height: 100px; + background: #e2e2e2; + margin: 20px 40px; + display: inline-block; + } + + .body .slider .content > div:hover { + cursor: pointer; + } + + .body .bin-container { + width: 80%; + height: 300px; + margin: 0 auto; + margin-top: 3%; + display: flex; + } + + .body .bin-container .box { + height: 100%; + padding: 30px; + width: 30%; + } + + .body .bin-container .box .current-album-image { + background: white; + height: 100px; + width: 100px; + margin: 20px 0; + } + + .body .bin-container .album-tracks { + background: #EEEEEE; + height: 100%; + overflow-y: scroll; + padding: 30px; + border: 3px solid #353526; + width: 30% + } + + .body .bin-container .arrow { + background: white; + height: 100%; + width: 9% + } + + .body .bin-container .playlist-tracks { + background: #EEEEEE; + height: 100%; + overflow-y: scroll; + padding: 30px; + border: 3px solid #353526; + width: 30% + } + + .body .bin-container h6 { + margin-bottom: 10px; + } + + + .body .button-container { + height: 100%; + padding-top: 3%; + width: 80%; + margin: auto; + } + + .body .button-container button { + font-family: "Avenir"; + margin: 10px auto; + font-size: 1.5em; + letter-spacing: 1px; + background: #353526; + padding: 12px 43px; + color: white; + border-radius: 10px; + transition: 0.3s ease all; + margin-right: 25px; + } + + .body .button-container button:hover { + background: rgba(54, 54, 38, 0.82); + cursor: pointer; + } + + + + +/*FOOTER*/ +.footer { + width: 100vw; + height: 50px; + background: #686859; +} + + .footer h6 { + color: white; + padding: 1% 5% 0 5%; + font-weight: 100; + font-size: 1.2em; + } diff --git a/style.css b/style.css new file mode 100644 index 0000000..1704993 --- /dev/null +++ b/style.css @@ -0,0 +1,132 @@ +@font-face { + font-family: "Avenir"; + src: url(fonts/AvenirNextLTPro-Regular.otf); +} + +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + box-sizing: border-box; +} + +body { + font-family: "Avenir"; +} + + +.container { + width: 100%; + background: white; +} + + +.header { + width: 100vw; + height: 60px; + background: #9B9B8C; + border-bottom: 2px #353526 solid; +} + + +/*CONTENT*/ +.body { + width: 100%; + height: 750px; + background: #EEEEEE; + display: flex; +} + + .body .left { + width: 50%; + height: 100%; + } + + .body .left .left-container { + width: 50%; + margin: auto; + margin-top: 35%; + text-align: center; + } + + .body .left .left-container h1 { + color: #4A0064; + font-size: 4em; + font-weight: 300; + letter-spacing: 3px; + } + + .body .left .left-container button { + font-family: "Avenir"; + margin: 30px auto; + font-size: 1.5em; + letter-spacing: 1px; + background: #353526; + padding: 12px 43px; + color: white; + border-radius: 10px; + transition: 0.3s ease all; + } + + .body .left .left-container button:hover { + background: rgba(54, 54, 38, 0.82); + cursor: pointer; + } + + .body .right { + width: 50%; + height: 100%; + position: relative; + } + + .body .right-overlay { + background: url('resources/track.jpg') no-repeat center; + background-size: cover; + filter: alpha(opacity=19); + width: 100%; + height: 100%; + -moz-opacity: 0.19; + opacity: 0.19; + position: absolute; + top: 0; + left: 0; + } + + .body .right-container { + position: absolute; + } + + .body .right .right-container { + z-index: 10; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + .body .right .right-container > div { + margin: 0 auto; + width: 220px; + height: 220px; + background: white; + margin-top: 2.7%; + } + + +/*FOOTER*/ +.footer { + width: 100vw; + height: 50px; + background: #686859; +} + + .footer h6 { + color: white; + padding: 1% 5% 0 5%; + font-weight: 100; + font-size: 1.2em; + }