From 44a396c46be8a28698a59310fd8377f2da19f436 Mon Sep 17 00:00:00 2001 From: Shu Sia Lukito Date: Fri, 2 Jun 2017 13:56:01 -0700 Subject: [PATCH] First commit --- .DS_Store | Bin 0 -> 6148 bytes css/style.css | 166 ++++++++++++++++++ ...ivision_bell.jpg => the_division_bell.jpg} | Bin index.html | 53 ++++-- js/script.js | 67 +++++++ playlist.html | 42 +++++ 6 files changed, 316 insertions(+), 12 deletions(-) create mode 100644 .DS_Store create mode 100644 css/style.css rename images/{division_bell.jpg => the_division_bell.jpg} (100%) create mode 100644 js/script.js create mode 100644 playlist.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..15f749b826444b93395caa585254ba3440296f40 GIT binary patch literal 6148 zcmeHKOHRWu5Pj1Y)QU})EPVxT5LM*_y#SCx1qzAOw5)S<-gt(OL)HkP8OeU*`Ners z>rc2x1$5&f z!9Xw&39@ z!H^z`SSry{#aj%qblQ{0RgQz9r9-^=5P$MV^CJ1_te-7zhSR2IjV0>-~Sr zPiC^oFH>R_3 - - - - - - - - + + + + Home + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+ +
+
+ track bin + choose tracks +
+
+ +
+ +
© 2017 Shu Sia Lukito
+ +
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..b90e6e3 --- /dev/null +++ b/js/script.js @@ -0,0 +1,67 @@ +// Retrieve all albums +var albums = {}; +$.get('https://lit-fortress-6467.herokuapp.com/object').then(function(data) { + albums = data.results; + addTracks(); + addThumbnails(); + addEvents(); +}, function(e) { + console.log('Error occurred when retrieving album data. Please contact your system administrator! ', e); +}); + +function addTracks() { + // Add 3 random albums to the track on splash page + albums.sort(function() { + return 0.5 - Math.random(); + }); + let tracks = albums.slice(0, 3); + tracks.forEach(function(curr) { + let elem = createImgElement(curr, 'img-track-album'); + $('#tracks-container').append(elem); + }); +} + +function addThumbnails() { + // Add album thumbnails to the playlist page + albums.forEach(function(curr) { + let elem = createImgElement(curr, 'img-thumbnail-album'); + $('#albums-container').append(elem); + }); +} + +function createImgElement(item, cl) { + let elem = document.createElement('img'); + elem.setAttribute('id', item.id); + elem.setAttribute('src', 'images/' + item.cover_art); + elem.setAttribute('alt', item.artist); + if (cl !== null) { + elem.setAttribute('class', cl); + } + return elem; +} + +function addEvents() { + + // Add selected album to description + $('.img-thumbnail-album').click(function() { + let selected = albums.find(function(curr) { + return curr.id === parseInt(this.id); + }, this); + let description = '

' + selected.artist + ': ' + selected.title + '

'; + $('.album-description').append(description); + }); + + // Add clear button handler + $('#btn_clear').click(function() { + $('.album-description').text(''); + }); + + // Add submit bin button handler + $('#btn_submit').click(function() { + $.post('https://lit-fortress-6467.herokuapp.com/post', function(data) { + console.log(data); + alert(data) + }); + }); + +} diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..9b69edb --- /dev/null +++ b/playlist.html @@ -0,0 +1,42 @@ + + + + + + Playlist + + + + + + + + + + +
+ +
+
click an album to add its tracks to the bin
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + +
+ + + +