From b40ffd6a913cf210d580cb51ce4853aee0a33f12 Mon Sep 17 00:00:00 2001 From: magical-mishka Date: Thu, 19 Jul 2018 11:06:42 -0700 Subject: [PATCH 1/9] Added Navbar --- public/javascripts/methods.js | 28 +++++++++++++++++++++++++-- public/stylesheets/style.css | 4 ++-- public/stylesheets/styleResults.css | 15 ++++++++++++++- views/index.hbs | 4 ++-- views/results.hbs | 30 +++++++++++++++++++++++------ 5 files changed, 68 insertions(+), 13 deletions(-) diff --git a/public/javascripts/methods.js b/public/javascripts/methods.js index 6c509b9..706d2f4 100644 --- a/public/javascripts/methods.js +++ b/public/javascripts/methods.js @@ -25,17 +25,41 @@ spotifyApi.initCredential = function() { spotifyApi.searchCategory = (category) => { const tracklist = []; - return spotifyApi.searchTracks('genre:' + category, {limit: 16}) + return spotifyApi.searchTracks('genre:' + category, {limit: 50}) .then((data) => { console.log('Search tracks by ' + data + ' in the artist name', data.body.tracks.items[0].album.name); data.body.tracks.items.forEach( (data)=> { tracklist.push(new Track(data.album.name, data.popularity, data.artists[0].name, data.name, data.uri)) }) - return tracklist; + return shuffle(tracklist); }) .catch((err) =>{ console.log(err); }); } +function shuffle(array) { + var currentIndex = array.length, temporaryValue, randomIndex; + + // While there remain elements to shuffle... + while (0 !== currentIndex) { + + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + const tracklist = []; + for( let i = 0; i < 20; i++) + { + tracklist.push(array[i]); + } + + return tracklist; + } + exports.spotifyApi = spotifyApi; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c867db3..b6d122b 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -29,7 +29,7 @@ body { .third-section{ display: flex; align-items: center; - margin-top: 80px; + margin-top: 30px; justify-content: center; } @@ -41,7 +41,7 @@ h1{ } h2{ - font-family: 'Indie Flower', cursive; + font-family: 'Montserrat'; font-size: 5em; color: white; font-weight: bold; diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 6103890..973bf7c 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -20,6 +20,11 @@ h1 { flex-wrap: wrap; } +nav{ + position: fixed; + background-color: black; +} + .cardsDisplay{ display: flex; flex-wrap: wrap; @@ -85,7 +90,7 @@ img { } .row { - margin-top: 0px; + margin-top: 50px; margin-bottom: 0px; } @@ -98,3 +103,11 @@ img { .collection{ margin-top: 30px; } + +.load-more{ + margin: 25px; +} + +button { + margin-bottom: 50px; +} diff --git a/views/index.hbs b/views/index.hbs index ac1752d..dcc4bfa 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -5,8 +5,8 @@

Spotify Filter

-
-

Let's Dance

+
+

Discover New Music

diff --git a/views/results.hbs b/views/results.hbs index 05edd6c..afdb307 100644 --- a/views/results.hbs +++ b/views/results.hbs @@ -5,25 +5,38 @@ -
+ +
+ +
{{#each tracklist}} -
+
+
- +
+ +
+
From e87a29b932a09eba484b6c30036fb6f103aaed7a Mon Sep 17 00:00:00 2001 From: magical-mishka Date: Thu, 19 Jul 2018 12:07:38 -0700 Subject: [PATCH 2/9] Added floating buttons to cards --- public/stylesheets/styleResults.css | 28 +++++++++++++++++++++--- views/results.hbs | 33 +++++------------------------ 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 973bf7c..fc6ad99 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -48,7 +48,7 @@ img { width: 350px; margin-top: 30px; margin-left: 4px; - + height: 430px; /* position: absolute; left: 50%; transform: translate(-50%, 0); */ @@ -90,7 +90,6 @@ img { } .row { - margin-top: 50px; margin-bottom: 0px; } @@ -109,5 +108,28 @@ img { } button { - margin-bottom: 50px; + 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; } diff --git a/views/results.hbs b/views/results.hbs index afdb307..9559c6d 100644 --- a/views/results.hbs +++ b/views/results.hbs @@ -5,17 +5,6 @@ -
+
+
+
-
+
-
+
{{#each tracklist}} -
+
- {{/each}} -
+
+
+
    +
  • +
    Add to my playlist
    +
    • +
+
+
+
+
-
- + +
{{#each tracklist}} -
+
+ add
{{/each}} - +{{/each}} +
-
- + +
+
From 10711fb5f37aeec64e54a4c464d067ffe636146a Mon Sep 17 00:00:00 2001 From: Joe Lin <37271083+JoeJLin@users.noreply.github.com> Date: Fri, 20 Jul 2018 11:04:31 -0700 Subject: [PATCH 6/9] Merge David's frontend changes (#16) * Design with a grid of 16 items. Search results show 16 cards only in a wrapped format. * Added random element to search * small css changes * Got the form to work Finally got the two buttons to work inside a single form * Update Deleted some files of bootstrap and remade the inputs for the popularity section --- .DS_Store | Bin 6148 -> 8196 bytes bin/www | 1 + package-lock.json | 321 ++++++++++++++++++++++++++++ public/javascripts/methods.js | 25 +++ public/stylesheets/style.css | 97 +++++++-- public/stylesheets/styleResults.css | 2 +- routes/index.js | 1 - views/index.hbs | 124 ++++------- views/layout.hbs | 7 + views/results.hbs | 12 -- 10 files changed, 484 insertions(+), 106 deletions(-) diff --git a/.DS_Store b/.DS_Store index 169e4b4a54b54fcaa68295792f5b46a6e77a9105..4a374fb8307e3a84601dfa66252b2f640cc4d0e4 100644 GIT binary patch literal 8196 zcmeHMPfr_16n_K6S@WkX0Sc%+tV$w93W-QS;Sfb}9Z+LM5iUjqL=tD$9?XXIjJ3PQ z0Yc)r5;^lqa=t2cm`1+;1w_6UYE70Fbo(53Gn zEHHrYY>})}-utT6l!gJrz!%AY*dH9sLgut=D=D`QEaVXYWgk|{gt|Bm2#lj;PRq8E z*n){DC`tt-`iMak9P1rzm(#MXq=Ey{hYzA76MaGhuZMQIA{zoPW?gbBgV2M+{u=?#}E3Xwb^j*MPuMzlBJUjc2^z`128Zi=U(8*h7BU*$YF(p_)Or>(L*c9*l*^%)H%*soGFdGyd{ zRo=?;CaXr$Pf0acR@Tav?a70Kxw#uN&fNUM;f!;zurNF0%+K9CJj_}Xm#*I~Jgx8T zAG|nx`AQBGh~8&lSUn$=uTj$^_?2BfJo0;Icz@Y;XMoxMfx)4#hV79Hqa$M@hoef!gP_PGKlVA>coZS&g_zb0Y>Q*WT_kzA zA)2B!8b&C)FzXv`7`m)R^Lvj2*Q3EQ%kwzqbzv#IRX8h#RCrqVQ5R#GzVktmIGwxS zQ7$XRhH0hXk5QYfGR|l=JDn@)N(-*Q_wWGLUZvtOKBhbjraYX2lRL<-i5+ABaUn+B!hPg9aw&V8 z?yo?RiwRT)QB7ntKvd;~-6t6#3oEdMGiDLz%o0YZL-ja9vY13M+2Lm9Bfq|8w3}|>N zLpeh+h6UnClE}tSENoxQ&cPwb3^sv5fE!4=f_%5J@H_Klei=`YUm2Jn{ssjF!{&IN GIm`g7$UUzB diff --git a/bin/www b/bin/www index 411b80e..1459c4e 100755 --- a/bin/www +++ b/bin/www @@ -12,6 +12,7 @@ var http = require('http'); * Get port from environment and store in Express. */ + var port = normalizePort('3000'); app.set('port', port); diff --git a/package-lock.json b/package-lock.json index 085fa85..4400f8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,17 @@ "negotiator": "0.6.1" } }, + "ajv": { + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", + "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", + "requires": { + "co": "4.6.0", + "fast-deep-equal": "1.1.0", + "fast-json-stable-stringify": "2.0.0", + "json-schema-traverse": "0.3.1" + } + }, "align-text": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", @@ -33,11 +44,36 @@ "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" }, + "asn1": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", + "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=" + }, + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" + }, "async": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" + }, + "aws-sign2": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", + "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" + }, + "aws4": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", + "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" + }, "basic-auth": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.0.tgz", @@ -46,6 +82,20 @@ "safe-buffer": "5.1.1" } }, + "bcrypt-pbkdf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", + "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", + "optional": true, + "requires": { + "tweetnacl": "0.14.5" + } + }, + "bluebird": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz", + "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==" + }, "body-parser": { "version": "1.18.2", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", @@ -74,6 +124,11 @@ "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", "optional": true }, + "caseless": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", + "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" + }, "center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", @@ -103,6 +158,11 @@ } } }, + "co": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", + "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=" + }, "combined-stream": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", @@ -155,6 +215,14 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, + "dashdash": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", + "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", + "requires": { + "assert-plus": "1.0.0" + } + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -189,6 +257,15 @@ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.0.0.tgz", "integrity": "sha512-FlWbnhgjtwD+uNLUGHbMykMOYQaTivdHEmYwAKFjn6GKe/CqY0fNae93ZHTd20snh9ZLr8mTzIL9m0APQ1pjQg==" }, + "ecc-jsbn": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", + "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=", + "optional": true, + "requires": { + "jsbn": "0.1.1" + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -251,6 +328,21 @@ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=" }, + "extsprintf": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", + "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" + }, + "fast-deep-equal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" + }, + "fast-json-stable-stringify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" + }, "finalhandler": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", @@ -270,6 +362,11 @@ "resolved": "https://registry.npmjs.org/foreachasync/-/foreachasync-3.0.0.tgz", "integrity": "sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY=" }, + "forever-agent": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", + "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=" + }, "form-data": { "version": "1.0.0-rc4", "resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.0-rc4.tgz", @@ -295,6 +392,14 @@ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" }, + "getpass": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", + "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", + "requires": { + "assert-plus": "1.0.0" + } + }, "handlebars": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.5.tgz", @@ -306,6 +411,20 @@ "uglify-js": "2.8.29" } }, + "har-schema": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", + "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=" + }, + "har-validator": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz", + "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", + "requires": { + "ajv": "5.5.2", + "har-schema": "2.0.0" + } + }, "hbs": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/hbs/-/hbs-4.0.1.tgz", @@ -326,6 +445,16 @@ "statuses": "1.4.0" } }, + "http-signature": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", + "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", + "requires": { + "assert-plus": "1.0.0", + "jsprim": "1.4.1", + "sshpk": "1.14.2" + } + }, "iconv-lite": { "version": "0.4.19", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", @@ -346,11 +475,53 @@ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=" }, + "is-typedarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", + "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" + }, "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, + "isstream": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" + }, + "jsbn": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", + "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", + "optional": true + }, + "json-schema": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", + "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=" + }, + "json-schema-traverse": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", + "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=" + }, + "json-stringify-safe": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", + "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=" + }, + "jsprim": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", + "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", + "requires": { + "assert-plus": "1.0.0", + "extsprintf": "1.3.0", + "json-schema": "0.2.3", + "verror": "1.10.0" + } + }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", @@ -365,6 +536,11 @@ "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", "optional": true }, + "lodash": { + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" + }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -430,6 +606,20 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, + "node-spotify-api": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/node-spotify-api/-/node-spotify-api-1.0.7.tgz", + "integrity": "sha512-/nM5ImBjgatzdRHc3MVY+t9iynC0LpO1PEkOlfyG1ogtlny2dQ++oq9m3qLJocbEqtZxtg66w5z4DXxdlSOsSg==", + "requires": { + "request": "2.87.0", + "request-promise": "4.2.2" + } + }, + "oauth-sign": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", + "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -462,6 +652,11 @@ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" }, + "performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" + }, "process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", @@ -476,6 +671,11 @@ "ipaddr.js": "1.6.0" } }, + "punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" + }, "qs": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", @@ -539,6 +739,64 @@ "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" }, + "request": { + "version": "2.87.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", + "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==", + "requires": { + "aws-sign2": "0.7.0", + "aws4": "1.7.0", + "caseless": "0.12.0", + "combined-stream": "1.0.6", + "extend": "3.0.1", + "forever-agent": "0.6.1", + "form-data": "2.3.2", + "har-validator": "5.0.3", + "http-signature": "1.2.0", + "is-typedarray": "1.0.0", + "isstream": "0.1.2", + "json-stringify-safe": "5.0.1", + "mime-types": "2.1.18", + "oauth-sign": "0.8.2", + "performance-now": "2.1.0", + "qs": "6.5.1", + "safe-buffer": "5.1.1", + "tough-cookie": "2.3.4", + "tunnel-agent": "0.6.0", + "uuid": "3.3.2" + }, + "dependencies": { + "form-data": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", + "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.6", + "mime-types": "2.1.18" + } + } + } + }, + "request-promise": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.2.tgz", + "integrity": "sha1-0epG1lSm7k+O5qT+oQGMIpEZBLQ=", + "requires": { + "bluebird": "3.5.1", + "request-promise-core": "1.1.1", + "stealthy-require": "1.1.1", + "tough-cookie": "2.3.4" + } + }, + "request-promise-core": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz", + "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=", + "requires": { + "lodash": "4.17.10" + } + }, "right-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", @@ -553,6 +811,11 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM=" }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, "send": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", @@ -605,11 +868,32 @@ "superagent": "2.3.0" } }, + "sshpk": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", + "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", + "requires": { + "asn1": "0.2.3", + "assert-plus": "1.0.0", + "bcrypt-pbkdf": "1.0.2", + "dashdash": "1.14.1", + "ecc-jsbn": "0.1.1", + "getpass": "0.1.7", + "jsbn": "0.1.1", + "safer-buffer": "2.1.2", + "tweetnacl": "0.14.5" + } + }, "statuses": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "integrity": "sha1-u3PURtonlhBu/MG2AaJT1sRr0Ic=" }, + "stealthy-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz", + "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=" + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -635,6 +919,28 @@ "readable-stream": "2.3.6" } }, + "tough-cookie": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz", + "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==", + "requires": { + "punycode": "1.4.1" + } + }, + "tunnel-agent": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", + "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", + "requires": { + "safe-buffer": "5.1.1" + } + }, + "tweetnacl": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", + "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", + "optional": true + }, "type-is": { "version": "1.6.16", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", @@ -684,11 +990,26 @@ "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, + "uuid": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", + "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" }, + "verror": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", + "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", + "requires": { + "assert-plus": "1.0.0", + "core-util-is": "1.0.2", + "extsprintf": "1.3.0" + } + }, "walk": { "version": "2.3.9", "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.9.tgz", diff --git a/public/javascripts/methods.js b/public/javascripts/methods.js index c1aae8d..a855dfb 100644 --- a/public/javascripts/methods.js +++ b/public/javascripts/methods.js @@ -40,6 +40,7 @@ function shuffle(array) { return array; } + spotifyApi.findTracks = (category, pop) => { const tracklist = []; let count = 0; @@ -72,5 +73,29 @@ function recursive(arr, category, os, pop, count){ .catch( (err) => { console.log(err)}); } +function shuffle(array) { + var currentIndex = array.length, temporaryValue, randomIndex; + + // While there remain elements to shuffle... + while (0 !== currentIndex) { + + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + const tracklist = []; + for( let i = 0; i < 12; i++) + { + tracklist.push(array[i]); + } + + return tracklist; + } + exports.spotifyApi = spotifyApi; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c5971c5..f55a70f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,3 +1,8 @@ +/* color pallete: +teal: #008080 +black: #2e2e2e +grey: #5d5d5d */ + body { padding: 20px; background-image: url("../images/background.jpg"); @@ -41,7 +46,7 @@ h1{ } h2 { - font-family: 'Montserrat'; + font-family: 'Montserrat', sans-serif; font-size: 5em; color: white; font-weight: bold; @@ -53,11 +58,6 @@ h2 { margin: 0 10px; } -.submit{ - background-color: white; - margin: 0 10px; -} - #submitIcon{ color: black; } @@ -84,27 +84,92 @@ h2 { background-color: #5b5b5b; } -.genreAlign{ +.genreSubmitButton{ + width: 300px; + height: 50px; + background-color: #008080; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; +} + +.modal{ + width: 70%; + max-height: 80%; + border-radius: 10px; +} + +.popularityButton{ + background-color: #5d5d5d; + width: 170px; + height: 30px; + display: flex; align-items: center; + justify-content: center; + border-radius: 5px; +} + +.popularityButton:hover{ + background-color: white; + color: #2e2e2e; +} + +.popupButtonsPopularitySection{ + display: flex; + align-items: center; + justify-content: space-around; + background-color: #2e2e2e; +} + +.popupButtonsGenreSection{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background-color: #2e2e2e; +} + +.genreButton{ + margin: 10px 10px; + width: 150px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + /* background-color: white; */ + /* color: #2e2e2e; */ + border-radius: 5px; + line-height: 1; +} + +.genreButton:hover{ + /* color: white; */ + color: #2e2e2e; + background-color: white; } .dropdown{ color: white; - background-color: #008080; border: #008080; width: 300px; height: 50px; } -select { +.legend{ display: flex; + justify-content: center; + color: white; + background-color: #2e2e2e; + padding: 5px; + font-family: 'Montserrat', sans-serif; } -h1 { - text-align: center; - +.submit{ + background-color: white; } + .submit:hover{ background-color: #008080; } @@ -122,10 +187,16 @@ img{ color: #008080; } +label { + background-color: #5d5d5d; + height: 30px; + width: 150px; +} + #content{ text-shadow: 3px 3px 3px teal; .dropdown { margin: 20px 20px; -} \ No newline at end of file +} diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 026b792..02b8dd4 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -18,7 +18,6 @@ h1 { margin-bottom: 30px; display: flex; flex-wrap: wrap; - } nav{ @@ -158,6 +157,7 @@ main { padding-left: 25px; } + h5{ font-weight: 200; } diff --git a/routes/index.js b/routes/index.js index 44e2f70..ef746ef 100644 --- a/routes/index.js +++ b/routes/index.js @@ -15,7 +15,6 @@ router.get('/results', function(req, res, next){ router.get('/genre', function(req, res){ console.log('Genre: ' + req.query.genre) console.log('Popularity: ' + req.query.pop); - // spotify.spotifyApi.combineArray(req.query.genre, req.query.pop) spotify.spotifyApi.findTracks(req.query.genre, req.query.pop) .then(function(result) { res.render('results', {tracklist: result} ) diff --git a/views/index.hbs b/views/index.hbs index 4ed76e0..17f2eb4 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -11,87 +11,53 @@
- - - - - - -
- - - - - + + Choose your filters + + + +
- - - - - -
diff --git a/views/layout.hbs b/views/layout.hbs index b7ae2c2..982ce7f 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -24,7 +24,14 @@ {{{body}}} + + diff --git a/views/results.hbs b/views/results.hbs index c1e16d9..6e6dbf1 100644 --- a/views/results.hbs +++ b/views/results.hbs @@ -39,19 +39,7 @@ add
{{/each}} -
From 5cfbe9a75a273cbebc2b3f006b9a887b9d572998 Mon Sep 17 00:00:00 2001 From: Sid Rao Date: Fri, 20 Jul 2018 14:11:44 -0700 Subject: [PATCH 7/9] Updated UI, added shuffle (#17) * Design with a grid of 16 items. Search results show 16 cards only in a wrapped format. * Added random element to search * small css changes * css changes * Added popularity filter * Improved popularity algo * Updated frontend and added shuffle --- models/track.js | 4 ++-- public/javascripts/methods.js | 21 +++++++++++++++------ public/stylesheets/style.css | 1 + public/stylesheets/styleResults.css | 5 +++++ views/index.hbs | 8 ++++---- views/results.hbs | 9 ++++----- 6 files changed, 31 insertions(+), 17 deletions(-) diff --git a/models/track.js b/models/track.js index ce58db9..90ef31c 100644 --- a/models/track.js +++ b/models/track.js @@ -1,11 +1,11 @@ class Track{ - constructor(album_name, popularity, artist, song_name, uri){ + constructor(album_name, popularity, artist, song_name, id){ this.album_name = album_name; this.popularity = popularity; this.artist = artist; this.song_name = song_name; - this.uri = uri; + this.id = id; } } diff --git a/public/javascripts/methods.js b/public/javascripts/methods.js index a855dfb..153d4c1 100644 --- a/public/javascripts/methods.js +++ b/public/javascripts/methods.js @@ -46,17 +46,21 @@ spotifyApi.findTracks = (category, pop) => { let count = 0; let os = 0; if(pop == 40) - os = 1500; + os = 2000; + if(pop == 65) + os = 750; + if(pop == 80) + os = 100; return recursive(tracklist, category, os, pop, count); } function recursive(arr, category, os, pop, count){ - return spotifyApi.searchTracks('genre:' + category, { limit: 50, offset: os, time_range: 'medium_term'}) + return spotifyApi.searchTracks('genre:' + category, { limit: 50, offset: os, time_range: 'short_term'}) .then((data) => { data.body.tracks.items.forEach((data) => { if (data.popularity <= pop) - arr.push(new Track(data.album.name, data.popularity, data.artists[0].name, data.name, data.uri)) + arr.push(new Track(data.album.name, data.popularity, data.artists[0].name, data.name, data.id)) }) console.log(arr.length) return arr; @@ -64,10 +68,10 @@ function recursive(arr, category, os, pop, count){ .then((data) =>{ count++; console.log("THIS IS COUNT: " + count); - if(arr.length < 50 && count < 20){ + if(arr.length < 50 && count < 30){ return recursive(arr, category, os+50, pop, count); }else{ - return arr; + return shuffle(arr); } }) .catch( (err) => { console.log(err)}); @@ -89,7 +93,12 @@ function shuffle(array) { array[randomIndex] = temporaryValue; } const tracklist = []; - for( let i = 0; i < 12; i++) + let x = 0; + if(array.length < 20) + x = 20; + else + x = array.length; + for( let i = 0; i < x; i++) { tracklist.push(array[i]); } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index f55a70f..5611382 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -195,6 +195,7 @@ label { #content{ text-shadow: 3px 3px 3px teal; +} .dropdown { margin: 20px 20px; diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 02b8dd4..aa24e82 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -178,4 +178,9 @@ p{ display: flex; align-items: center; font-size: 2em; +} + +#search-again { + top: -35px; + margin-right: -5px; } \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 17f2eb4..8cf85f0 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -24,10 +24,10 @@
- - - - + + + +
diff --git a/views/results.hbs b/views/results.hbs index 6e6dbf1..4db5725 100644 --- a/views/results.hbs +++ b/views/results.hbs @@ -11,9 +11,8 @@
@@ -23,7 +22,7 @@
  • -
    Add to my playlist
    +
    Add to my list
@@ -35,7 +34,7 @@
{{#each tracklist}}
- + add
{{/each}} From 1502761f0f1f608f665c1e7a718797b552b922bb Mon Sep 17 00:00:00 2001 From: Joe Lin <37271083+JoeJLin@users.noreply.github.com> Date: Fri, 20 Jul 2018 14:28:58 -0700 Subject: [PATCH 8/9] Merge updated menu (#18) * Design with a grid of 16 items. Search results show 16 cards only in a wrapped format. * Added random element to search * small css changes * Got the form to work Finally got the two buttons to work inside a single form * Update Deleted some files of bootstrap and remade the inputs for the popularity section * Updated Changed colors of the buttons * Update Completed the landing page and changed the title on the layoy --- public/stylesheets/style.css | 83 +++++++++++++++++------------------- views/index.hbs | 82 ++++++++++++++++++----------------- views/layout.hbs | 2 +- 3 files changed, 83 insertions(+), 84 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 5611382..4a7a2cd 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,5 +1,5 @@ /* color pallete: -teal: #008080 +teal: #008080, #26a69a black: #2e2e2e grey: #5d5d5d */ @@ -58,33 +58,19 @@ h2 { margin: 0 10px; } -#submitIcon{ - color: black; -} - -#submitIcon:hover{ - color: white; -} - -#popularity{ +.submitButton{ + margin: 10px; background-color: #008080; - transition: 200ms; + position: absolute; + right: 5px; } -#popularity:hover{ - background-color: #009696; -} - -#genre{ - background-color: #3b3b3b; - transition: 200ms; -} -#genre:hover{ - background-color: #5b5b5b; +#submitIcon{ + color: white; } -.genreSubmitButton{ +.filterButton{ width: 300px; height: 50px; background-color: #008080; @@ -98,16 +84,20 @@ h2 { width: 70%; max-height: 80%; border-radius: 10px; + background-color: #2e2e2e; } .popularityButton{ - background-color: #5d5d5d; + background-color: #008080; width: 170px; - height: 30px; + height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; + color: white; + margin: 10px 10px; + } .popularityButton:hover{ @@ -118,8 +108,9 @@ h2 { .popupButtonsPopularitySection{ display: flex; align-items: center; - justify-content: space-around; + justify-content: center; background-color: #2e2e2e; + flex-wrap: wrap; } .popupButtonsGenreSection{ @@ -128,6 +119,7 @@ h2 { align-items: center; justify-content: center; background-color: #2e2e2e; + padding-bottom: 0px; } .genreButton{ @@ -137,41 +129,41 @@ h2 { display: flex; align-items: center; justify-content: center; - /* background-color: white; */ - /* color: #2e2e2e; */ + background-color: #008080; border-radius: 5px; line-height: 1; } .genreButton:hover{ - /* color: white; */ color: #2e2e2e; background-color: white; } -.dropdown{ - color: white; - background-color: #008080; - border: #008080; - width: 300px; - height: 50px; +.genreButton:checked{ + color: #2e2e2e; + background-color: white; } .legend{ - display: flex; + display: grid; justify-content: center; color: white; background-color: #2e2e2e; - padding: 5px; - font-family: 'Montserrat', sans-serif; + } -.submit{ - background-color: white; +legend{ + padding: 5px; + font-family: 'Montserrat', sans-serif; + font-size: 2em; + font-weight: bold; } -.submit:hover{ - background-color: #008080; +.p{ + display: flex; + justify-content: center; + margin: 0; + color: #696766; } .genreForm { @@ -183,8 +175,10 @@ img{ height: 250px; } -.buttoncolor { - color: #008080; + +input:checked + label{ + color: #2e2e2e; + background-color: white; } label { @@ -195,9 +189,8 @@ label { #content{ text-shadow: 3px 3px 3px teal; -} .dropdown { margin: 20px 20px; -} +} \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 8cf85f0..8073591 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -13,51 +13,57 @@
- Choose your filters + Choose your filters
+
diff --git a/views/layout.hbs b/views/layout.hbs index 982ce7f..7a7ea49 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -2,7 +2,7 @@ - {{title}} + Spotify Filter From 3155b540d6db5021e89fc5a23986a502c22180ec Mon Sep 17 00:00:00 2001 From: magical-mishka Date: Fri, 20 Jul 2018 14:32:42 -0700 Subject: [PATCH 9/9] Final version Has a working sidebar which can remove items upon clicking item. --- public/javascripts/methods.js | 28 ++++++- public/js/main.js | 45 +++++++++- public/stylesheets/style.css | 99 ++++++++++++++++++---- public/stylesheets/styleResults.css | 20 ++++- routes/index.js | 1 - views/index.hbs | 124 ++++++++++------------------ views/layout.hbs | 7 +- views/results.hbs | 30 +++---- 8 files changed, 233 insertions(+), 121 deletions(-) diff --git a/public/javascripts/methods.js b/public/javascripts/methods.js index c1aae8d..79783b8 100644 --- a/public/javascripts/methods.js +++ b/public/javascripts/methods.js @@ -40,6 +40,7 @@ function shuffle(array) { return array; } + spotifyApi.findTracks = (category, pop) => { const tracklist = []; let count = 0; @@ -49,7 +50,7 @@ spotifyApi.findTracks = (category, pop) => { return recursive(tracklist, category, os, pop, count); } - + function recursive(arr, category, os, pop, count){ return spotifyApi.searchTracks('genre:' + category, { limit: 50, offset: os, time_range: 'medium_term'}) .then((data) => { @@ -72,5 +73,28 @@ function recursive(arr, category, os, pop, count){ .catch( (err) => { console.log(err)}); } -exports.spotifyApi = spotifyApi; +function shuffle(array) { + var currentIndex = array.length, temporaryValue, randomIndex; + + // While there remain elements to shuffle... + while (0 !== currentIndex) { + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + const tracklist = []; + for( let i = 0; i < 12; i++) + { + tracklist.push(array[i]); + } + + return tracklist; + } + +exports.spotifyApi = spotifyApi; diff --git a/public/js/main.js b/public/js/main.js index 8ee6c1f..6811383 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,28 +1,65 @@ -console.log('cardTop'); var allAddButtons = document.getElementsByClassName("btn-floating"); +var artistList = []; +var songList = []; +var albumList = []; + var addSongToList = function() { var musicList = document.getElementById('musiclist'); var songName = this.getAttribute('name'); var artistName = this.getAttribute('artist'); var albumName = this.getAttribute('album'); - + var uri = this.getAttribute('uri'); console.log(songName); + console.log(uri); var htmlToInsert = - '
  • \n' + + '\n' + '\n' + 'music_note\n' + ''+ songName+'\n' + '

    '+artistName+ '

    \n' + '

    '+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); + + }; for (var i = 0; i < allAddButtons.length; i++) { allAddButtons[i].addEventListener('click', addSongToList, false); } + + +var songItems = document.getElementsByClassName("song-item"); + +// for (var i = 0; i < songItems.length; i++) { +// console.log(i); +// console.log(songItems[i]); +// songItems[i].addEventListener('click', removeItem(), false); +// } + + function removeItem(){ + +// songitems[i].remove(); + // var itemToRemove = songItems[i]; + // itemToRemove.remove(); + + (event.currentTarget).remove(); + + } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c5971c5..6682720 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,3 +1,8 @@ +/* color pallete: +teal: #008080 +black: #2e2e2e +grey: #5d5d5d */ + body { padding: 20px; background-image: url("../images/background.jpg"); @@ -41,7 +46,7 @@ h1{ } h2 { - font-family: 'Montserrat'; + font-family: 'Montserrat', sans-serif; font-size: 5em; color: white; font-weight: bold; @@ -53,11 +58,6 @@ h2 { margin: 0 10px; } -.submit{ - background-color: white; - margin: 0 10px; -} - #submitIcon{ color: black; } @@ -84,27 +84,92 @@ h2 { background-color: #5b5b5b; } -.genreAlign{ +.genreSubmitButton{ + width: 300px; + height: 50px; + background-color: #008080; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; +} + +.modal{ + width: 70%; + max-height: 80%; + border-radius: 10px; +} + +.popularityButton{ + background-color: #5d5d5d; + width: 170px; + height: 30px; + display: flex; align-items: center; + justify-content: center; + border-radius: 5px; +} + +.popularityButton:hover{ + background-color: white; + color: #2e2e2e; +} + +.popupButtonsPopularitySection{ + display: flex; + align-items: center; + justify-content: space-around; + background-color: #2e2e2e; +} + +.popupButtonsGenreSection{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background-color: #2e2e2e; +} + +.genreButton{ + margin: 10px 10px; + width: 150px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + /* background-color: white; */ + /* color: #2e2e2e; */ + border-radius: 5px; + line-height: 1; +} + +.genreButton:hover{ + /* color: white; */ + color: #2e2e2e; + background-color: white; } .dropdown{ color: white; - background-color: #008080; border: #008080; width: 300px; height: 50px; } -select { +.legend{ display: flex; + justify-content: center; + color: white; + background-color: #2e2e2e; + padding: 5px; + font-family: 'Montserrat', sans-serif; } -h1 { - text-align: center; - +.submit{ + background-color: white; } + .submit:hover{ background-color: #008080; } @@ -122,10 +187,16 @@ img{ color: #008080; } -#content{ +label { + background-color: #5d5d5d; + height: 30px; + width: 150px; +} + +#content{ text-shadow: 3px 3px 3px teal; .dropdown { margin: 20px 20px; -} \ No newline at end of file +} diff --git a/public/stylesheets/styleResults.css b/public/stylesheets/styleResults.css index 026b792..82adf1c 100644 --- a/public/stylesheets/styleResults.css +++ b/public/stylesheets/styleResults.css @@ -18,7 +18,6 @@ h1 { margin-bottom: 30px; display: flex; flex-wrap: wrap; - } nav{ @@ -106,6 +105,7 @@ img { .collection{ margin-top: 62px; + border:0px; } .load-more{ @@ -158,6 +158,7 @@ main { padding-left: 25px; } + h5{ font-weight: 200; } @@ -178,4 +179,19 @@ p{ display: flex; align-items: center; font-size: 2em; -} \ No newline at end of file +} + +#button-remove{ + top: 26px; + color: #500000; +} + +.collection a.collection-item { +color: #383838; + +} + +#add-playlist-button{ + margin-left: 110px; + margin-top: 8px; +} diff --git a/routes/index.js b/routes/index.js index 44e2f70..ef746ef 100644 --- a/routes/index.js +++ b/routes/index.js @@ -15,7 +15,6 @@ router.get('/results', function(req, res, next){ router.get('/genre', function(req, res){ console.log('Genre: ' + req.query.genre) console.log('Popularity: ' + req.query.pop); - // spotify.spotifyApi.combineArray(req.query.genre, req.query.pop) spotify.spotifyApi.findTracks(req.query.genre, req.query.pop) .then(function(result) { res.render('results', {tracklist: result} ) diff --git a/views/index.hbs b/views/index.hbs index 4ed76e0..17f2eb4 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -11,87 +11,53 @@
    - - - - - - -
    - - - - - + + Choose your filters + + + +
    - - - - - -
    diff --git a/views/layout.hbs b/views/layout.hbs index b7ae2c2..f9c158e 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -18,13 +18,18 @@ - + {{{body}}} + + diff --git a/views/results.hbs b/views/results.hbs index c1e16d9..ee0f930 100644 --- a/views/results.hbs +++ b/views/results.hbs @@ -21,11 +21,17 @@
    -
      -
    • -
      Add to my playlist
      -
      • -
    +
    +
    +
    My playlist
    + playlist_add + +
    +
      +
    • Create a playlist of songs you likearrow_upward
      • +
    • Add a song here by clicking the
      plus buttonarrow_forward
      • +
    +
    @@ -36,22 +42,10 @@ {{#each tracklist}}
    - add + add
    {{/each}} -