diff --git a/index.html b/index.html index 8e0abfd..1d7e4fb 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,52 @@ - + Splash Page + + + - +
+ +
+ +
+
+
+
+
+

Track Bin

+
+
+ + + +
+
+
+
+ + +
+ + + + + diff --git a/layout.css b/layout.css new file mode 100644 index 0000000..4fbc343 --- /dev/null +++ b/layout.css @@ -0,0 +1,479 @@ +.p-0 { + padding: 0px; +} + +.p-3 { + padding: 3px; +} + +.p-5 { + padding: 5px; +} + +.p-10 { + padding: 10px; +} + +.p-15 { + padding: 15px; +} + +.p-20 { + padding: 20px; +} + +.p-25 { + padding: 25px; +} + +.p-30 { + padding: 30px; +} + +.p-35 { + padding: 35px; +} + +.p-40 { + padding: 40px; +} + +.p-45 { + padding: 45px; +} + +.p-50 { + padding: 50px; +} + +.pt-0 { + padding-top: 0px; +} + +.pt-3 { + padding-top: 3px; +} + +.pt-5 { + padding-top: 5px; +} + +.pt-10 { + padding-top: 10px; +} + +.pt-15 { + padding-top: 15px; +} + +.pt-20 { + padding-top: 20px; +} + +.pt-25 { + padding-top: 25px; +} + +.pt-30 { + padding-top: 30px; +} + +.pt-35 { + padding-top: 35px; +} + +.pt-40 { + padding-top: 40px; +} + +.pt-45 { + padding-top: 45px; +} + +.pt-50 { + padding-top: 50px; +} + +.pr-0 { + padding-right: 0px; +} + +.pr-3 { + padding-right: 3px; +} + +.pr-5 { + padding-right: 5px; +} + +.pr-10 { + padding-right: 10px; +} + +.pr-15 { + padding-right: 15px; +} + +.pr-20 { + padding-right: 20px; +} + +.pr-25 { + padding-right: 25px; +} + +.pr-30 { + padding-right: 30px; +} + +.pr-35 { + padding-right: 35px; +} + +.pr-40 { + padding-right: 40px; +} + +.pr-45 { + padding-right: 45px; +} + +.pr-50 { + padding-right: 50px; +} + +.pb-0 { + padding-bottom: 0px; +} + +.pb-3 { + padding-bottom: 3px; +} + +.pb-5 { + padding-bottom: 5px; +} + +.pb-10 { + padding-bottom: 10px; +} + +.pb-15 { + padding-bottom: 15px; +} + +.pb-20 { + padding-bottom: 20px; +} + +.pb-25 { + padding-bottom: 25px; +} + +.pb-30 { + padding-bottom: 30px; +} + +.pb-35 { + padding-bottom: 35px; +} + +.pb-40 { + padding-bottom: 40px; +} + +.pb-45 { + padding-bottom: 45px; +} + +.pb-50 { + padding-bottom: 50px; +} + +.pl-0 { + padding-left: 0px; +} + +.pl-3 { + padding-left: 3px; +} + +.pl-5 { + padding-left: 5px; +} + +.pl-10 { + padding-left: 10px; +} + +.pl-15 { + padding-left: 15px; +} + +.pl-20 { + padding-left: 20px; +} + +.pl-25 { + padding-left: 25px; +} + +.pl-30 { + padding-left: 30px; +} + +.pl-35 { + padding-left: 35px; +} + +.pl-40 { + padding-left: 40px; +} + +.pl-45 { + padding-left: 45px; +} + +.pl-50 { + padding-left: 50px; +} + +.m-0 { + margin: 0px; +} + +.m-3 { + margin: 3px; +} + +.m-5 { + margin: 5px; +} + +.m-10 { + margin: 10px; +} + +.m-15 { + margin: 15px; +} + +.m-20 { + margin: 20px; +} + +.m-25 { + margin: 25px; +} + +.m-30 { + margin: 30px; +} + +.m-35 { + margin: 35px; +} + +.m-40 { + margin: 40px; +} + +.m-45 { + margin: 45px; +} + +.m-50 { + margin: 50px; +} + +.mt-0 { + margin-top: 0px; +} + +.mt-3 { + margin-top: 3px; +} + +.mt-5 { + margin-top: 5px; +} + +.mt-10 { + margin-top: 10px; +} + +.mt-15 { + margin-top: 15px; +} + +.mt-20 { + margin-top: 20px; +} + +.mt-25 { + margin-top: 25px; +} + +.mt-30 { + margin-top: 30px; +} + +.mt-35 { + margin-top: 35px; +} + +.mt-40 { + margin-top: 40px; +} + +.mt-45 { + margin-top: 45px; +} + +.mt-50 { + margin-top: 50px; +} + +.mr-0 { + margin-right: 0px; +} + +.mr-3 { + margin-right: 3px; +} + +.mr-5 { + margin-right: 5px; +} + +.mr-10 { + margin-right: 10px; +} + +.mr-15 { + margin-right: 15px; +} + +.mr-20 { + margin-right: 20px; +} + +.mr-25 { + margin-right: 25px; +} + +.mr-30 { + margin-right: 30px; +} + +.mr-35 { + margin-right: 35px; +} + +.mr-40 { + margin-right: 40px; +} + +.mr-45 { + margin-right: 45px; +} + +.mr-50 { + margin-right: 50px; +} + +.mb-0 { + margin-bottom: 0px; +} + +.mb-3 { + margin-bottom: 3px; +} + +.mb-5 { + margin-bottom: 5px; +} + +.mb-10 { + margin-bottom: 10px; +} + +.mb-15 { + margin-bottom: 15px; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mb-25 { + margin-bottom: 25px; +} + +.mb-30 { + margin-bottom: 30px; +} + +.mb-35 { + margin-bottom: 35px; +} + +.mb-40 { + margin-bottom: 40px; +} + +.mb-45 { + margin-bottom: 45px; +} + +.mb-50 { + margin-bottom: 50px; +} + +.ml-0 { + margin-left: 0px; +} + +.ml-3 { + margin-left: 3px; +} + +.ml-5 { + margin-left: 5px; +} + +.ml-10 { + margin-left: 10px; +} + +.ml-15 { + margin-left: 15px; +} + +.ml-20 { + margin-left: 20px; +} + +.ml-25 { + margin-left: 25px; +} + +.ml-30 { + margin-left: 30px; +} + +.ml-35 { + margin-left: 35px; +} + +.ml-40 { + margin-left: 40px; +} + +.ml-45 { + margin-left: 45px; +} + +.ml-50 { + margin-left: 50px; +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..f70483a --- /dev/null +++ b/main.js @@ -0,0 +1,25 @@ +//VARIABLES + +const choose = document.getElementById('chooseButton'); +let img1 = document.getElementById('img1'); +let img2 = document.getElementById('img2'); +let img3 = document.getElementById('img3'); + +//Load 3 random album images + +document.addEventListener('DOMContentLoaded', () => { + axios.get('https://lit-fortress-6467.herokuapp.com/object') + .then(response => { + let data = response.data.results; + + for (let i = 1; i <= 3; i++){ + if (i === 1){ + img1.setAttribute("src", `./images/${data[Math.floor(Math.random() * data.length)].cover_art}`) + } else if (i === 2){ + img2.setAttribute("src", `./images/${data[Math.floor(Math.random() * data.length)].cover_art}`) + } else if (i === 3){ + img3.setAttribute("src", `./images/${data[Math.floor(Math.random() * data.length)].cover_art}`) + } + } + }); +}); diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..476a8dd --- /dev/null +++ b/playlist.html @@ -0,0 +1,50 @@ + + + + + + + Playlist Page + + + + + + +
+

click an album to add its tracks to the bin

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ + + + + + +
+ +
+
+
+
+ + + + + + + diff --git a/playlist.js b/playlist.js new file mode 100644 index 0000000..1142777 --- /dev/null +++ b/playlist.js @@ -0,0 +1,57 @@ +//VARIABLES + +const scroll = document.getElementById('scroll'); +const box = document.getElementById('box'); +const clear = document.getElementById('clearButton'); +const submit = document.getElementById('submitButton'); +const success = document.getElementById('success'); + +//Put albums in scrollbar + +document.addEventListener('DOMContentLoaded', () => { + axios.get('https://lit-fortress-6467.herokuapp.com/object') + .then(response => { + let data = response.data.results; + data.forEach(function(item) { + let childDiv = `
+ +
` + scroll.innerHTML += childDiv; + }); + }); +}); + +//Add Selected Albums + +scroll.addEventListener('click', (e) => { + axios.get('https://lit-fortress-6467.herokuapp.com/object') + .then(response => { + let data = response.data.results; + data.forEach(function(item) { + let childDiv = `
${item.artist}: ${item.title}
` + if (box.childElementCount < data.length){ + if (parseInt(e.target.id) === item.id){ + box.innerHTML += childDiv; + } + } + }) + }); +}); + +//Clear Tracks Button + +clear.addEventListener('click', (e) => { + box.innerHTML = '' +}) + +//Submit a POST request on playlist page: receive a response and append the data + +submit.addEventListener('click', () => { + axios.post('https://lit-fortress-6467.herokuapp.com/post') + .then(response => { + success.innerHTML = response.data; + setTimeout(function(){ + success.innerHTML = '' + }, 3000); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..0cbfc6a --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +#header1 { + background-color: #999691; + height: 6vh; +} + +#header2 { + background-color: #999691; + color: white; + font-size: 20px; + height: 15vh; + justify-content: flex-end; +} + +#main { + background-color: #f7f7f7; + height: 84vh; +} + +main { + background-color: #f7f7f7; + height: 75vh; +} + +footer { + background-color: #706c67; + height: 6vh; +} + +.flex { + display: flex; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.footer-text { + color: white; + padding-top: 10px; + padding-left: 40px; +} + +#left { + flex-basis: 50%; +} + +#right { + flex-basis: 50%; + background-image: url(./resources/fadedTrack.jpg); + background-size: cover; +} + +.squish { + height: 35vh; +} + +.center { + margin: auto; +} + +#track-text { + font-size: 36px; + color: purple; +} + +.button { + background-color: #333231; + border: none; + border-radius: 4px; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} + +.pl-img { + max-width: 180px; + max-height: 180px; + margin: auto; +} + +#box { + margin: 20px 60px; + border: solid black 2px; + height: 30vh; + background-color: #f4f2ef; + overflow: scroll; +} + +#scroll { + margin: 0px 60px; + height: 15vh; + align-items: center; + overflow: scroll; +} + +.album-container { + margin: auto; +} + +.albums { + max-width: 75px; + max-height: 75px; + margin-top: 5px; +} + +#success { + color: green; + font-size: 20px; + align-self: center; + margin-left: 20px; + transition: ease-out; +}