From 6a26b68fc503a34a21ece7dfd011de76b3b9f90c Mon Sep 17 00:00:00 2001 From: Franciely Beckert Date: Sat, 23 Mar 2024 20:31:08 +0100 Subject: [PATCH 1/2] almost done, css missing --- app.js | 92 ++++++++++++++++++++++++++++++--- package.json | 6 +++ public/styles/style.css | 31 +++++++++++ views/albums.hbs | 12 +++++ views/artist-search-results.hbs | 12 +++++ views/error.hbs | 12 +++++ views/index.hbs | 14 +++++ views/layout.hbs | 10 ++++ views/tracks.hbs | 16 ++++++ 9 files changed, 198 insertions(+), 7 deletions(-) create mode 100644 views/albums.hbs create mode 100644 views/artist-search-results.hbs create mode 100644 views/error.hbs create mode 100644 views/index.hbs create mode 100644 views/layout.hbs create mode 100644 views/tracks.hbs diff --git a/app.js b/app.js index 5ea8eb4db..0168c0cff 100644 --- a/app.js +++ b/app.js @@ -1,18 +1,96 @@ -require('dotenv').config(); +require("dotenv").config(); -const express = require('express'); -const hbs = require('hbs'); +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(); +const path = require("path"); -app.set('view engine', 'hbs'); -app.set('views', __dirname + '/views'); -app.use(express.static(__dirname + '/public')); +app.set("view engine", "hbs"); +app.set("views", __dirname + "/views"); +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: +// sending info from a form +app.get("/", (req, res) => { + res.set("Content-Type", "text/html"); + + res.render("index", { + title: "Hello world", + }); +}); + +// Query String +app.get("/artist-search", (req, res) => { + spotifyApi + .searchArtists(req.query.artist) + .then((data) => { + console.log("The received data from the API:", data.body); + res.render("artist-search-results", { artists: data.body.artists.items }); + console.log(data.body.artists.items) + }) + .catch((err) => { + console.log("The error while searching artists occurred: ", err); + res.render("error", { err: err }); + }); +}); + +app.get("/albums/:artistId", (req, res, next) => { + // get the artistId from the request params + const artistId = req.params.artistId; + console.log("artistId", artistId) + + // use Spofify Api to get the albums of the specified artist + spotifyApi + .getArtistAlbums(artistId) + .then((data) => { + // render the albums.hbs template, passing the albums data + res.render("albums", { albums: data.body.items }); + console.log(data) + }) + .catch((error) => { + // Pass any errors to the error handling middleware + next(error); + }); +}); + +app.get("/tracks/:albumId", (req, res, next) => { + // get the albumId from the request params + const albumId = req.params.albumId; + + // use Spofify Api to get the tracks of the specified album + spotifyApi + .getAlbumTracks(albumId) + .then((data) => { + // render the tracks.hbs template, passing the tracks data + res.render("tracks", { tracks: data.body.items }); + console.log(data.body.items) + + }) + .catch((error) => { + // Pass any errors to the error handling middleware + next(error); + }); +}); + -app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊')); +app.listen(3000, () => + console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊") +); diff --git a/package.json b/package.json index c9f4085ba..afa2ec0c1 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.18.3", + "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..392e0c3ef 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -0,0 +1,31 @@ +body { + background-image:url(/images/spotify-background.jpeg); + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} + + +#form-style { + display: flex; + flex-direction: column; + width: 60%; + height: 12rem; + background: rgba(255,255, 255, 0.5); +} + +#box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +/* #input-fiel { + +} + +#button-fiel { + +} */ \ No newline at end of file diff --git a/views/albums.hbs b/views/albums.hbs new file mode 100644 index 000000000..aab874264 --- /dev/null +++ b/views/albums.hbs @@ -0,0 +1,12 @@ +{{!-- albums.hbs --}} + +

Albums for:

+
+ {{#each albums}} +
+ {{name}} +

{{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..3b8dc883e --- /dev/null +++ b/views/artist-search-results.hbs @@ -0,0 +1,12 @@ + +

Hello

+{{#each artists}} +
+

{{name}}

+ {{! to check if the images array is not empty }} + {{#if images.[0]}} + {{name}} Image + {{/if}} + View Albums +
+{{/each}} \ No newline at end of file diff --git a/views/error.hbs b/views/error.hbs new file mode 100644 index 000000000..7701b3800 --- /dev/null +++ b/views/error.hbs @@ -0,0 +1,12 @@ + + + + + + Error + + +

Error

+ {{{err}}} + + \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 000000000..8a8fee8b7 --- /dev/null +++ b/views/index.hbs @@ -0,0 +1,14 @@ + + +
+
+ + +
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..60c10506b --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,10 @@ + + + + + {{title}} + + + {{{body}}} + + \ No newline at end of file diff --git a/views/tracks.hbs b/views/tracks.hbs new file mode 100644 index 000000000..6fc8ce723 --- /dev/null +++ b/views/tracks.hbs @@ -0,0 +1,16 @@ +
+

Title

+

Listen

+
+
+ {{#each tracks}} +
+

{{name}}

+
+
Listen to {{name}}:
+ + Download audio +
+
+ {{/each}} +
\ No newline at end of file From 38dbb7c92add95b9984ba917d0a2e3d4a4720a7d Mon Sep 17 00:00:00 2001 From: Franciely Beckert Date: Mon, 25 Mar 2024 11:38:53 +0100 Subject: [PATCH 2/2] Do Css --- app.js | 3 +- public/styles/style-index.css | 7 +++ public/styles/style.css | 101 ++++++++++++++++++++++++++------ views/albums.hbs | 22 ++++--- views/artist-search-results.hbs | 17 +++--- views/index.hbs | 2 +- views/layout.hbs | 1 + views/tracks.hbs | 9 +-- 8 files changed, 119 insertions(+), 43 deletions(-) create mode 100644 public/styles/style-index.css diff --git a/app.js b/app.js index 0168c0cff..4ae30a4ff 100644 --- a/app.js +++ b/app.js @@ -62,7 +62,8 @@ app.get("/albums/:artistId", (req, res, next) => { .getArtistAlbums(artistId) .then((data) => { // render the albums.hbs template, passing the albums data - res.render("albums", { albums: data.body.items }); + res.render("albums", { albums: data.body.items, artist: data.body.items[0].artists[0] }); + console.log(data.body.items[0].artists) console.log(data) }) .catch((error) => { diff --git a/public/styles/style-index.css b/public/styles/style-index.css new file mode 100644 index 000000000..c71e679ed --- /dev/null +++ b/public/styles/style-index.css @@ -0,0 +1,7 @@ +body { + background-image:url(/images/spotify-background.jpeg); + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/public/styles/style.css b/public/styles/style.css index 392e0c3ef..5c99a13d8 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -1,31 +1,94 @@ body { - background-image:url(/images/spotify-background.jpeg); - background-size: cover; - display: flex; - justify-content: center; - align-items: center; + display: flex; + /* justify-content: center; + align-items: center; */ + flex-wrap: wrap; + align-items: flex-end; + gap: 20px; } - #form-style { - display: flex; - flex-direction: column; - width: 60%; - height: 12rem; - background: rgba(255,255, 255, 0.5); + display: flex; + flex-direction: column; + width: 60%; + height: 12rem; + background: rgba(255, 255, 255, 0.5); + background-image: none; } #box { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; /* Adjust width as needed */ + height: 100%; /* Adjust height as needed */ +} + +#input-field { + margin-bottom: 10px; + width: 50%; +} + +#button-field { + background-color: red; + color: white; + border: none; + height: 1.5rem; + opacity: 0.7; } -/* #input-fiel { +.artist, +.albums { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.artist-info, .album { + display: flex; + flex-direction: column; +} + +.name-link-artist-search { + background-color: rgb(79, 79, 79); + width: 200px; + text-align: center; + color: white; + text-decoration: none; + font-size: 0.7rem; + height: 4.5rem; +} +.name-artist-search { + margin: auto; + padding-bottom: 5px; } -#button-fiel { - -} */ \ No newline at end of file +.artist-album-img { + width: 200px; + height: 200px; +} + +.button-artist-search { + color: white; + text-decoration: none; + background-color: red; + border-radius: 3px; + padding: 3px; +} + +.h1-albums { + width: 100%; + text-align: center; +} + +.name-track { + background-color: rgb(79, 79, 79); + text-align: center; + color: white; +} + +.text-track { + margin-bottom: 10px; +} diff --git a/views/albums.hbs b/views/albums.hbs index aab874264..934705aba 100644 --- a/views/albums.hbs +++ b/views/albums.hbs @@ -1,12 +1,16 @@ -{{!-- albums.hbs --}} +{{! albums.hbs }} -

Albums for:

-
- {{#each albums}} +

Albums for: {{artist.name}}

+ +{{#each albums}} +
- {{name}} -

{{name}}

- View Tracks + {{name}} +
+

{{name}}

+ View Tracks +
+
- {{/each}} -
\ No newline at end of file +
+{{/each}} \ No newline at end of file diff --git a/views/artist-search-results.hbs b/views/artist-search-results.hbs index 3b8dc883e..d74fe516b 100644 --- a/views/artist-search-results.hbs +++ b/views/artist-search-results.hbs @@ -1,12 +1,15 @@ -

Hello

{{#each artists}}
-

{{name}}

- {{! to check if the images array is not empty }} - {{#if images.[0]}} - {{name}} Image - {{/if}} - View Albums +
+ {{! to check if the images array is not empty }} + {{#if images.[0]}} + {{name}} Image + {{/if}} +
+

{{name}}

+ View Albums +
+
{{/each}} \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 8a8fee8b7..1e506cf75 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,4 +1,4 @@ - +
diff --git a/views/layout.hbs b/views/layout.hbs index 60c10506b..b4a7100ae 100644 --- a/views/layout.hbs +++ b/views/layout.hbs @@ -2,6 +2,7 @@ + {{title}} diff --git a/views/tracks.hbs b/views/tracks.hbs index 6fc8ce723..755889942 100644 --- a/views/tracks.hbs +++ b/views/tracks.hbs @@ -1,13 +1,10 @@ -
-

Title

-

Listen

-
+
{{#each tracks}}
-

{{name}}

+

{{name}}

-
Listen to {{name}}:
+
Listen to {{name}}:
Download audio