finish lab

app.js

@@ -1,18 +1,72 @@
-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 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)
+  );
 
 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(__dirname + "/views/partials");
 
 // setting the spotify-api goes here:
 
+app.get("/", (req, res) => {
+  res.render("index");
+});
+
+app.get("/artist-search", (req, res) => {
+  spotifyApi
+    .searchArtists(req.query.artist)
+    .then((data) => {
+      res.render("artist-search-results", { artists: data.body.artists.items });
+    })
+    .catch((err) =>
+      console.log("The error while searching artists occurred: ", err)
+    );
+});
+
+app.get("/albums/:artistId", (req, res) => {
+  spotifyApi.getArtistAlbums(req.params.artistId).then(
+    function (data) {
+      res.render("albums", { albums: data.body.items });
+    },
+    function (err) {
+      console.error(err);
+    }
+  );
+});
+
+app.get("/tracks/:albumId", (req, res) => {
+  spotifyApi.getAlbumTracks(req.params.albumId).then(
+    function (data) {
+      res.render("tracks", { tracks: data.body.items });
+    },
+    function (err) {
+      console.error(err);
+    }
+  );
+});
+
 // Our routes go here:
 
-app.listen(3000, () => console.log('My Spotify project running on port 3000 🎧 🥁 🎸 🔊'));
+app.listen(3000, () =>
+  console.log("My Spotify project running on port 3000 🎧 🥁 🎸 🔊")
+);

package.json

@@ -12,5 +12,11 @@
   "license": "ISC",
   "devDependencies": {
     "nodemon": "^2.0.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "hbs": "^4.2.0",
+    "spotify-web-api-node": "^5.0.2"
   }
 }

public/styles/style.css

@@ -0,0 +1,133 @@
+body {
+    background-image: url('../images/spotify-background.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    font-family: Arial, sans-serif;
+    color: #ffffff;
+}
+
+h1 {
+    font-size: 36px;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 100px;
+}
+
+p {
+    font-size: 18px;
+    text-align: center;
+    margin-top: 20px;
+}
+
+li {
+    list-style-type: none;
+}
+
+button {
+    background-color: #1db954;
+    color: #ffffff;
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+#search-container {
+    text-align: center;
+    margin-top: 50px;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+    background-image: url('./images/spotify-background.jpg');
+
+}
+
+#artist-container ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 50px;
+}
+
+#artist-partial {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+}
+
+#artist-partial a {
+    color: #ffffff;
+    text-decoration: none;
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #1db954;
+    color: #ffffff;
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#albums-container ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 50px;
+    margin-top: 50px;
+}
+
+#albums-container a {
+    color: #ffffff;
+    text-decoration: none;
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #1db954;
+    color: #ffffff;
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#tracks-container th {
+    background-color: #333333;
+    color: #d3d3d3;
+    padding: 20px;
+}
+
+#tracks-container td {
+    padding: 10px;
+    border-bottom: 1px solid #d3d3d3;
+}
+
+#tracks-container {
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+}
+
+#tracks-container table {
+    width: 100%;
+}
+
+#tracks-container thead {
+    width: 100%;
+}
+
+#tracks-container tbody {
+    width: 100%;
+}

views/albums.hbs

@@ -0,0 +1,14 @@
+<h1>Albums for: {{albums.0.artists.0.name}}</h1>
+<div id="albums-container">
+  <ul>
+    {{#each albums}}
+      <li>
+        <div>
+          <h3>{{name}} by {{artists.0.name}}</h3>
+            <a href="/tracks/{{id}}">View Tracks</a>
+          <img src="{{images.0.url}}" alt="{{name}}" />
+        </div>
+      </li>
+    {{/each}}
+  </ul>
+</div>

views/artist-search-results.hbs

@@ -0,0 +1,7 @@
+<div class="artist-container">
+    <ul>
+        {{#each artists}}
+            {{> artistPartial}}
+        {{/each}}
+    </ul>
+</div>

views/index.hbs

@@ -0,0 +1,6 @@
+<div id="search-container">
+  <form action="/artist-search" method="GET">
+    <input type="text" name="artist" placeholder="Search for an artist" />
+    <button type="submit">Search for an Artist</button>
+  </form>
+</div>

views/layout.hbs

@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Music Search</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+  </head>
+  <body>
+    {{{body}}}
+  </body>
+</html>

views/partials/artistPartial.hbs

@@ -0,0 +1,21 @@
+<div id="artist-partial">
+    <h2>{{name}}</h2>
+    <a href="/albums/{{id}}">View Ablums</a>
+    <h3>Genres:</h3>
+    <ul>
+        {{#each genres}}
+        <li>{{this}}</li>
+    {{/each}}
+    </ul>
+    <h3>Followers:</h3>
+    <p>{{followers.total}}</p>
+    <h3>Popularity:</h3>
+    <p>{{popularity}}</p>
+    <h3>Spotify ID:</h3>
+    <p>{{id}}</p>
+    <h3>Spotify Link:</h3>
+    <a href="{{external_urls.spotify}}">Link to {{name}} on Spotify</a>
+    <h3>Images:</h3>
+    <img src="{{images.[0].url}}" alt="{{name}}" />
+</div>
+</div>

views/tracks.hbs

@@ -0,0 +1,24 @@
+<div id="tracks-container">
+<table>
+    <thead>
+        <tr>
+            <th>Title</th>
+            <th>Listen</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{#each tracks}}
+            <tr>
+                <td>{{name}}</td>
+                <td>
+                    <audio controls>
+                        <source src="{{preview_url}}" type="audio/mpeg">
+                        Your browser does not support the audio element.
+                    </audio>
+                </td>
+            </tr>
+        {{/each}}
+    </tbody>
+</table>
+
+</div>