From 63317747acde9a4e4d144d038e046d86ab37fe1c Mon Sep 17 00:00:00 2001 From: RickyJary Date: Sat, 9 Nov 2024 14:56:57 +0100 Subject: [PATCH] all Iterations done --- app.js | 49 +++++++++++++++ package.json | 6 ++ public/styles/style.css | 105 ++++++++++++++++++++++++++++++++ views/albums.hbs | 5 ++ views/artist-search-results.hbs | 8 +++ views/home.hbs | 4 ++ views/layout.hbs | 14 +++++ views/tracks.hbs | 8 +++ 8 files changed, 199 insertions(+) create mode 100644 views/albums.hbs create mode 100644 views/artist-search-results.hbs create mode 100644 views/home.hbs create mode 100644 views/layout.hbs create mode 100644 views/tracks.hbs diff --git a/app.js b/app.js index 5ea8eb4db..c28665247 100644 --- a/app.js +++ b/app.js @@ -4,6 +4,7 @@ const express = require('express'); const hbs = require('hbs'); // require spotify-web-api-node package here: +const SpotifyWebApi = require('spotify-web-api-node'); const app = express(); @@ -13,6 +14,54 @@ app.use(express.static(__dirname + '/public')); // setting the spotify-api goes here: +const spotifyApi = new SpotifyWebApi({ + clientId: process.env.CLIENT_ID, + clientSecret: process.env.CLIENT_SECRET + }); + + // Retrieve an access token + spotifyApi + .clientCredentialsGrant() + .then(data => spotifyApi.setAccessToken(data.body['access_token'])) + .catch(error => console.log('Something went wrong when retrieving an access token', error)); + // Our routes go here: +app.get('/', (req, res, next) => { + res.render('home') +}) + +app.get('/artist-search-results', (req, res, next) => { + const { artist } = req.query; + spotifyApi + .searchArtists(artist) + .then(data => { + console.log('The received data from the API: ', data.body.artists.items); + res.render('artist-search-results', {artist: data.body.artists.items}) + }) + .catch(err => console.log('The error while searching artists occurred: ', err)); +}) + +app.get('/albums/:artistId', (req, res, next) => { + const { artistId } = req.params; + spotifyApi + .getArtistAlbums(artistId) + .then(data => { + console.log('Album Information: ', data.body.items); + res.render('albums', {album: data.body.items}) + }) + .catch(err => console.log('The error while searching artists occurred: ', err)); +}) + +app.get('/tracks/:albumId', (req, res, next) => { + const { albumId } = req.params; + spotifyApi + .getAlbumTracks(albumId) + .then(data => { + console.log('Album Tracks: ', data.body.items); + res.render('tracks', {track: data.body.items}) + }) + .catch(err => console.log('The error while searching artists occurred: ', err)); +}) + app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); diff --git a/package.json b/package.json index c9f4085ba..938120348 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,11 @@ "license": "ISC", "devDependencies": { "nodemon": "^2.0.2" + }, + "dependencies": { + "dotenv": "^16.4.5", + "express": "^4.21.1", + "hbs": "^4.2.0", + "spotify-web-api-node": "^5.0.2" } } diff --git a/public/styles/style.css b/public/styles/style.css index e69de29bb..1f235a89f 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -0,0 +1,105 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +body { + background-color: #121212; + color: #FFFFFF; + font-size: 16px; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background-color: #1E1E1E; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); + margin-bottom: 20px; +} + +h1, h2, h3, p { + color: #FFFFFF; +} + +a { + color: #1DB954; + text-decoration: none; +} + +a:hover { + color: #1ed760; +} + +button { + background-color: #1DB954; + color: #FFFFFF; + padding: 10px 20px; + border: none; + border-radius: 25px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #1ed760; +} + +form { + display: flex; + justify-content: center; + margin: 20px 0; +} + +input[type="text"] { + padding: 10px; + width: 300px; + border: 1px solid #333; + border-radius: 20px; + background-color: #333; + color: #FFFFFF; + margin-right: 10px; +} + +.container p { + font-size: 1.1em; + font-weight: bold; + margin: 10px 0; +} + +.container img { + width: 100%; + max-width: 300px; + border-radius: 10px; + margin-bottom: 10px; +} + +audio { + width: 100%; + max-width: 300px; + margin-top: 10px; +} + +@media (max-width: 768px) { + .container { + padding: 15px; + } + + input[type="text"] { + width: 200px; + } + + button { + padding: 8px 15px; + } + + .container img { + width: 100%; + max-width: 100%; + } +} diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..9a3231795 --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,5 @@ +{{#each album as |album|}} +

{{album.name}}

+ +View tracks +{{/each}} \ No newline at end of file diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs new file mode 100644 index 000000000..fed1249ff --- /dev/null +++ b/views/artist-search-results.hbs @@ -0,0 +1,8 @@ +{{#each artist as |artist|}} +
+

{{artist.name}}

+ + View albums +
+ +{{/each}} \ No newline at end of file diff --git a/views/home.hbs b/views/home.hbs new file mode 100644 index 000000000..3d92c0665 --- /dev/null +++ b/views/home.hbs @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..af694d878 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,14 @@ + + + + + + + Spoti + + +
+ {{{body}}} +
+ + \ No newline at end of file diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..09e0b8698 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,8 @@ +{{#each track as |track|}} +
+

{{track.name}}

+ + +
+ +{{/each}} \ No newline at end of file