diff --git a/app.js b/app.js
index 5ea8eb4db..10820ce2c 100644
--- a/app.js
+++ b/app.js
@@ -1,18 +1,107 @@
-require('dotenv').config();
+require("dotenv").config();
-const express = require('express');
-const hbs = require('hbs');
+const express = require("express");
+const hbs = require("hbs");
+const path = require("path");
-// require spotify-web-api-node package here:
+const SpotifyWebApi = require("spotify-web-api-node");
const app = express();
-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"));
+hbs.registerPartials(path.join(__dirname, "views/partials"));
// 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("/home", (request, response, next) => response.render("index"));
-app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
+app.get("/artist-search", (request, response, next) => {
+ let artistDetails;
+ console.log(request.query.query);
+ spotifyApi
+ .searchArtists(request.query.query)
+ .then((data) => {
+ let myArr = data.body.artists.items;
+ let newArr = [];
+ myArr.forEach((item) => {
+ let myObj = {};
+ myObj.name = item.name;
+ myObj.image = item.images[0];
+ myObj.id = item.id;
+ newArr.push(myObj);
+ });
+ return newArr;
+ })
+ .then((artistDetails) => {
+ console.log(artistDetails);
+ return response.render("artist-search-results", { artistDetails });
+ })
+ .catch((err) =>
+ console.log("The error while searching artists occurred: ", err)
+ );
+});
+
+app.get("/albums/:artistId", (req, res, next) => {
+ spotifyApi
+ .getArtistAlbums(req.params.artistId)
+ .then((data) => {
+ let myArr = data.body.items;
+ let newArr = [];
+ myArr.forEach((item) => {
+ let myObj = {};
+ myObj.name = item.name;
+ myObj.image = item.images[0];
+ myObj.id = item.id;
+ newArr.push(myObj);
+ });
+ return newArr;
+ })
+ .then((albumDetails) => {
+ console.log(albumDetails);
+ return res.render("albums", { albumDetails });
+ })
+ .catch((err) =>
+ console.log("The error while searching artists occurred: ", err)
+ );
+});
+
+app.get("/tracks/:albumId", (req, res, next) => {
+ spotifyApi
+ .getAlbumTracks(req.params.albumId, { limit: 5, offset: 1 })
+ .then((data) => {
+ let myArr = data.body.items;
+ let newArr = [];
+ myArr.forEach((item) => {
+ let myObj = {};
+ myObj.name = item.name;
+ myObj.preview_url = item.preview_url;
+ newArr.push(myObj);
+ });
+ return newArr;
+ })
+ .then((trackDetails) => {
+ console.log(trackDetails);
+ return res.render("tracks", { trackDetails });
+ })
+ .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..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
deleted file mode 100644
index e69de29bb..000000000
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
new file mode 100644
index 000000000..22ec86369
--- /dev/null
+++ b/public/stylesheets/style.css
@@ -0,0 +1,86 @@
+body {
+ background-image: url("../images/spotify-background.jpeg");
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.search-box {
+ background-color: rgba(255, 255, 255,0.7);
+ width: 40%;
+ height: 200px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content:center;
+ position: absolute;
+ top: 35%;
+ left: 30%;
+}
+
+.search-box > input,.button {
+ margin: 10px;
+ padding: 8px;
+}
+
+.search-box > input {
+ width: 60%;
+ margin: 2px;
+ border-radius:5px;
+ border-color: rgb(221, 218, 218);
+}
+
+.search-box > .button {
+ background-color: rgb(246, 79, 80);
+ color: rgb(255, 255, 255);
+ border: none;
+}
+
+.card img {
+ height: 200px;
+ object-fit: cover;
+ }
+
+.card-title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 150px;
+}
+
+ .artists {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .card {
+ padding: 15px;
+ margin: 15px;
+ height: 350px;
+ background-color: rgb(255, 255, 255);
+ }
+
+ button.button {
+ background-color: rgb(246, 79, 80);
+ color: rgb(255, 255, 255);
+ border: none;
+}
+
+#result-text {
+ color: white;
+}
+
+.track-title {
+
+}
+.trackcard {
+ background-color: rgb(182, 178, 178);
+ margin: 5px;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px;
+}
+
+.tracks {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/views/albums.hbs b/views/albums.hbs
new file mode 100644
index 000000000..edee7f78d
--- /dev/null
+++ b/views/albums.hbs
@@ -0,0 +1,11 @@
+
+
Here are the results for your artist search:
+
+
+ {{#each albumDetails}}
+ {{> albumPartial this}}
+ {{else}}
+
No items yet!
+ {{/each}}
+
+
Here are the results for your artist search:
+
+
+ {{#each artistDetails}}
+ {{> artistPartial this}}
+ {{else}}
+
No items yet!
+ {{/each}}
+
Spotify Search
+
+
+
+ {{this.name}}
+
+
+
+
+
Here are the songs for the selected album
+
+
+ {{#each trackDetails}}
+ {{> trackPartial this}}
+ {{else}}
+
No items yet!
+ {{/each}}
+
+