\n' +
+ 'music_note\n' +
+ ''+ songName+'\n' +
+ ''+artistName+ '
'+albumName+'
\n' + + 'remove_circle\n'+ + ''; + + musicList.insertAdjacentHTML('beforeend', htmlToInsert); + + var descriptionItem = document.getElementById('description-list'); + descriptionItem.remove(); + + artistList.push(artistName); + songList.push(songName); + albumList.push(albumName); + + console.log (artistList); + console.log(songName); + console.log(albumName); -function rejectImage(){ - cardTop.classList.add("scale-out"); - cardTop2.classList.add("scale-out"); }; + +for (var i = 0; i < allAddButtons.length; i++) { + allAddButtons[i].addEventListener('click', addSongToList, false); +} + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c867db3..353faaa 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,3 +1,8 @@ +/* color pallete: +teal: #008080, #26a69a +black: #2e2e2e +grey: #5d5d5d */ + body { padding: 20px; background-image: url("../images/background.jpg"); @@ -29,7 +34,7 @@ body { .third-section{ display: flex; align-items: center; - margin-top: 80px; + margin-top: 30px; justify-content: center; } @@ -40,8 +45,8 @@ h1{ font-weight: bold; } -h2{ - font-family: 'Indie Flower', cursive; +h2 { + font-family: 'Montserrat', sans-serif; font-size: 5em; color: white; font-weight: bold; @@ -53,66 +58,145 @@ h2{ margin: 0 10px; } -.submit{ - background-color: white; - margin: 0 10px; +.submitButton{ + margin: 10px; + background-color: #008080; + position: absolute; + right: 5px; } -#submitIcon{ - color: black; -} -#submitIcon:hover{ +#submitIcon{ color: white; } -#popularity{ +.filterButton{ + width: 300px; + height: 50px; background-color: #008080; - transition: 200ms; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; } -#popularity:hover{ - background-color: #009696; +.modal{ + width: 70%; + max-height: 80%; + border-radius: 10px; + background-color: #2e2e2e; } -#genre{ - background-color: #3b3b3b; - transition: 200ms; +.popularityButton{ + background-color: #008080; + width: 170px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; + color: white; + margin: 10px 10px; + } -#genre:hover{ - background-color: #5b5b5b; +.popularityButton:hover{ + background-color: white; + color: #2e2e2e; } -.dropdown{ - color: white; +.popupButtonsPopularitySection{ + display: flex; + align-items: center; + justify-content: center; + background-color: #2e2e2e; + flex-wrap: wrap; +} - background-color: #008080; - border: #008080; - width: 300px; - height: 50px; +.popupButtonsGenreSection{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background-color: #2e2e2e; + padding-bottom: 0px; } -select { +.genreButton{ + margin: 10px 10px; + width: 150px; + height: 80px; display: flex; + align-items: center; + justify-content: center; + background-color: #008080; + border-radius: 5px; + line-height: 1; } -h1 { - text-align: center; +.genreButton:hover{ + color: #2e2e2e; + background-color: white; +} +.genreButton:checked{ + color: #2e2e2e; + background-color: white; } -.submit:hover{ - background-color: #008080; + +.legend{ + display: grid; + justify-content: center; + color: white; + background-color: #2e2e2e; + +} + +legend{ + padding: 5px; + font-family: 'Montserrat', sans-serif; + font-size: 2em; + font-weight: bold; +} + +.p{ + display: flex; + justify-content: center; + margin: 0; + color: #696766; } .genreForm { display: flex; +} -img { +img{ width: 250px; - length: 250px; + height: 250px; } -.buttoncolor { - color: #008080; + +input:checked + label{ + color: #2e2e2e; + background-color: white; +} + +label { + background-color: #5d5d5d; + height: 30px; + width: 150px; +} + +label { + background-color: #5d5d5d; + height: 30px; + width: 150px; +} + +#content{ + text-shadow: 3px 3px 3px teal; + +.dropdown { + margin: 20px 20px; + } diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 6103890..1fc07d0 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -20,6 +20,12 @@ h1 { flex-wrap: wrap; } +nav{ + position: fixed; + background-color: black; + +} + .cardsDisplay{ display: flex; flex-wrap: wrap; @@ -27,38 +33,41 @@ h1 { img { width: 250px; - length: 250px; + height: 250px; } .card { width: 300px; - length: 300px; + height: 300px; margin-top: 30px; align-items: center; position: absolute; - left: 50%; - transform: translate(-50%, 0); + left: 50%; + transform: translate(-50%, 0); } + .card-panel{ width: 350px; - margin-top: 30px; - margin-left: 4px; + margin-left: 17px; + height: 430px; + margin: 10px auto; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + transition: 0.3s; - /* position: absolute; - left: 50%; - transform: translate(-50%, 0); */ } +.card-panel:hover { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3); +} .card .card-content{ padding: 0px; padding-bottom: 5px; } .logo{ - font-size: 2rem; - margin-top: 20px; - margin-right: 10px; - color: white; + font-size: 2.3rem !important; + margin-top: 2px; + margin-right: 5px; } .buttoncolor { @@ -85,7 +94,6 @@ img { } .row { - margin-top: 0px; margin-bottom: 0px; } @@ -96,5 +104,98 @@ img { } .collection{ - margin-top: 30px; + margin-top: 62px; + border:0px; +} + +.load-more{ + margin: 25px; +} + +button { + margin: 50px; +} + +.btn-floating.halfway-fab{ + position: relative; + top: -80px; + right: -229px; + +} +iframe{ + padding: 12px; +} + +.btn-floating.btn-large i { + line-height: 70px; +} + +.btn-large i { + font-size: 2.3rem; +} + +.btn-floating.btn-large { + width: 70px; + height: 70px; +} + +.sidenav{ + z-index: 99; +} + +main { + padding-left: 300px; + } + + @media only screen and (max-width : 992px) { + header, main { + padding-left: 0; + } + } + +#list-header{ + background-color: black; + padding-left: 25px; +} + + +h5{ + font-weight: 200; +} + +.collection .collection-item.avatar i.circle { + background-color: black; +} + +p{ + font-size: 13px; +} + +#playlist-description{ + position: absolute; +} + +.white-text{ + display: flex; + align-items: center; + font-size: 2em; +} + +#button-remove{ + top: 26px; + color: #500000; +} + +.collection a.collection-item { +color: #383838; + +} + +#add-playlist-button{ + margin-left: 110px; + margin-top: 8px; +} +#search-again { + top: -35px; + margin-right: -5px; } diff --git a/routes/index.js b/routes/index.js index c80d05d..ef746ef 100644 --- a/routes/index.js +++ b/routes/index.js @@ -12,11 +12,11 @@ router.get('/results', function(req, res, next){ res.render('results'); }); -router.get('/categories', function(req, res){ - console.log(req.query.categories) - spotify.spotifyApi.searchCategory(req.query.categories) +router.get('/genre', function(req, res){ + console.log('Genre: ' + req.query.genre) + console.log('Popularity: ' + req.query.pop); + spotify.spotifyApi.findTracks(req.query.genre, req.query.pop) .then(function(result) { - console.log("THIS IS THE TRACKLIST\n" + result); res.render('results', {tracklist: result} ) } ) }) diff --git a/views/index.hbs b/views/index.hbs index ac1752d..c99c15c 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -5,85 +5,64 @@