diff --git a/index.html b/index.html index 8e0abfd..ba84ad4 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,34 @@ - + track bin + + + - +
+
+
+
+
+
+

track bin

+
+ +
+
+
+
+ + + +
+
+ +
diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..9424483 --- /dev/null +++ b/playlist.html @@ -0,0 +1,46 @@ + + + + + track bin + + + + + +
+
+ 
            click an album to add its tracks to the bin
 +
+
+
+
+ + +
+
+
+
+
+
+
+
+ + + +
+
+ + +
+ +
+ + +
+ +
+ + diff --git a/resources/arrow.png b/resources/arrow.png new file mode 100644 index 0000000..76eef0f Binary files /dev/null and b/resources/arrow.png differ diff --git a/resources/fadedTrack.jpg b/resources/fadedTrack.jpg index 4ef81d7..d0e4ae4 100644 Binary files a/resources/fadedTrack.jpg and b/resources/fadedTrack.jpg differ diff --git a/scripts/bin.js b/scripts/bin.js new file mode 100644 index 0000000..d03f28b --- /dev/null +++ b/scripts/bin.js @@ -0,0 +1,78 @@ +const albumScroll = document.getElementById('album-scroll'); +const bin = document.getElementById('bin'); +const apiKey = '27c16b31f7afa331a59fd0bed30d96e1'; +const tracks = document.getElementById('tracks'); + +// Implementation using original API +// axios.get('https://lit-fortress-6467.herokuapp.com/object') +// .then(response => { +// const data = response.data.results; +// for (const album of data) { +// albumScroll.insertAdjacentHTML('beforeend', ` +// +// `); +// } +// }); + + +document.getElementById('search-btn').addEventListener('click', e => { + e.preventDefault(); + albumScroll.textContent = ''; + const searchTerms = document.getElementById('search-input').value; + axios.get(`http://ws.audioscrobbler.com/2.0/?method=album.search&album=${searchTerms}&api_key=${apiKey}&format=json&limit=20`) + .then(response => { + const data = response.data.results.albummatches.album; + for (const album of data) { + albumScroll.insertAdjacentHTML('beforeend', ` + + `); + } + + + }); +}); + + + +albumScroll.addEventListener('click', e => { + if (e.target && e.target.nodeName === "IMG") { + const selectedAlbum = document.getElementById('selected-album'); + selectedAlbum.textContent = ''; + + tracks.textContent = ''; + + const albumName = e.target.id.split(': '); + axios.get(`http://ws.audioscrobbler.com/2.0/?method=album.getinfo&artist=${albumName[0]}&album=${albumName[1]}&api_key=${apiKey}&format=json`) + .then(response => { + const albumData = response.data.album; + selectedAlbum.insertAdjacentHTML('beforeend', ` +

Add tracks from

+

${e.target.id}

+ + `); + for (const track of albumData.tracks.track) { + tracks.insertAdjacentHTML('beforeend', ` + + `); + } + }); + } +}); + +document.getElementById('arrow').addEventListener('click', e => { + const selectedTrack = tracks.value; + if (selectedTrack) { + bin.textContent += selectedTrack + "\n"; + } +}); + +document.getElementById('clear-tracks-btn').addEventListener('click', e => { + bin.textContent = ''; +}); + +document.getElementById('submit-bin-btn').addEventListener( 'click', e => { + axios.post('https://lit-fortress-6467.herokuapp.com/post', bin.textContent) + .then(response => { + console.log(response.data); + }); +}); diff --git a/scripts/splash.js b/scripts/splash.js new file mode 100644 index 0000000..e5ebffb --- /dev/null +++ b/scripts/splash.js @@ -0,0 +1,39 @@ +// Implementation with original API +// axios.get('https://lit-fortress-6467.herokuapp.com/object') +// .then(response => { +// const data = response.data.results; +// const selectedPics = []; +// let picIndex = 0; +// for (let i = 1; i <= 3; i++) { +// do { +// picIndex = Math.floor(Math.random() * data.length); +// } while (selectedPics.includes(picIndex)); +// selectedPics.push(picIndex); +// document.getElementById(`album${i}`).src = `images/${data[picIndex].cover_art}`; +// } +// }); + +// Uses lastFM API to get current top 50 artists, chooses three f those at radom, then uses the api again to get the image of the top album of each of those three artists +const apiKey = '27c16b31f7afa331a59fd0bed30d96e1'; +const albums = []; + +axios.get(`http://ws.audioscrobbler.com/2.0/?method=chart.gettopartists&api_key=${apiKey}&format=json`) +.then(response => { + const promiseArr = []; + const topArtists = response.data.artists.artist; + const selectedArtists = []; + let artistIndex = 0; + for (let i = 1; i <= 3; i++) { + do { + artistIndex = Math.floor(Math.random() * topArtists.length); + } while (selectedArtists.includes(artistIndex)); + selectedArtists.push(artistIndex); + promiseArr.push(axios.get(`http://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=${topArtists[artistIndex].name}&api_key=${apiKey}&format=json&limit=1`)); + } + return Promise.all(promiseArr); +}) +.then(promises => { + for (let i = 0; i< 3; i++ ) { + document.getElementById(`album${i + 1}`).src = promises[i].data.topalbums.album[0].image[3]['#text']; + } +}); diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..c6a48dc --- /dev/null +++ b/styles/main.css @@ -0,0 +1,239 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* End of reset */ + +@font-face { + font-family: Avenir; + src: url("../fonts/AvenirNextLTPro-Regular.otf") format("opentype"); +} + +.container { + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; + +} + +header, footer { + background-color: #9B9B8C; + flex-basis: 7vh; + display: flex; +} + +#copyright { + color: #EEEEEE; + font-size: 2em; + align-self: center; + font-family: Avenir; +} + +main { + flex-grow: 1; + display: flex; + border-top: solid; + border-bottom: solid; + border-width: 1px; + box-sizing: border-box; +} + +#splash-left { + flex-grow: 1; + background-color: #EEEEEE; + display: flex; + justify-content: center; +} + +#splash-right { + width: 700px; + background-image: url("../resources/fadedTrack.jpg"); + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +#content { + align-self: center; + display: flex; + flex-direction: column; + +} + +h1 { + font-size: 6em; + color: #4C0066; + font-family: Avenir; +} + +button { + background-color: #353526; + color: #EEEEEE; + font-size: 2.3em; + border-radius: 6px; + border: none; + font-family: Avenir; + height: 1.5em; + cursor: pointer; + min-width: 300px; +} + +.album-cover { + height: 30%; +} + +form { + display: flex; + flex-direction: column; +} + +#header-playlist { + flex-basis: 17vh; +} + +.instructions { + font-size: 3em; + color: #EEEEEE; + font-family: Avenir; + align-self: flex-end; +} + +#bin-maker { + flex-direction: column; + align-items: center; +} + +#album-scroll { + overflow: auto; + width: 85%; + flex-wrap: nowrap; + display: flex; +} + +.add-album { + height: 8em; + margin: 30px 30px; + border: solid 1px; +} + +#bin-container { + width: 85%; + display: flex; + flex-direction: column; + margin: 30px; + height: 25em; +} + +textarea, select { + margin-bottom: 30px; + font-size: 2em; + background-color: #EEEEEE; + resize: none; + border: solid 2px; + width: 33%; +} + +#clear-tracks-btn { + margin-right: 30px; +} + +::-webkit-scrollbar { +} + +::-webkit-scrollbar-track { + background-color: #EEEEEE; + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + +::-webkit-scrollbar-thumb { + background-color: #353526; + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); +} + +#search-div { + display: flex; + justify-content: flex-start; +} + +#search-form { + margin: 20px; + width: 80%; +} + +#search-input { + font-size: 2em; + margin-right: 30px; +} + +#track-adder { + display: flex; + justify-content: space-between; +} + +#selected-album { + width: 27%; + font-size: 2em; + font-family: Arial; + display: flex; + flex-direction: column; +} + +#selected-art { + width: 200px; + margin-top: 10px; +} + +#arrow { + width: 50px; + height: 70px; + align-self: center; +}