finished lab

app.js

@@ -4,15 +4,58 @@ 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();
 
 app.set('view engine', 'hbs');
 app.set('views', __dirname + '/views');
 app.use(express.static(__dirname + '/public'));
 
+app.use(express.urlencoded({ extended: true }));
+
 // 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) => {
+    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(data => {
+      res.render('albums', {albums: data.body.items});
+    })
+    .catch(err => console.log('The error while searching albums occurred: ', err));
+  });
+
+  app.get('/tracks/:albumId', (req, res) => {
+    spotifyApi
+    .getAlbumTracks(req.params.albumId)
+    .then(data => {
+      res.render('tracks', {tracks: data.body.items});
+    })
+    .catch(err => console.log('The error while searching tracks occurred: ', err));
+  });
 
 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,81 @@
+body {
+    background-image: url("../images/spotify-background.jpeg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+}
+
+form {
+    width: 50%;
+    height: 200px;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin: auto;
+    margin-top: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+input {
+    width: 60%;
+    height: 25px;
+    display: block;
+}
+
+form button {
+    padding: 10px;
+    margin-top: 10px;
+}
+
+.artist-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 10%; 
+    height: 200px;
+    background-color: rgb(80, 80, 80);
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.artist-card img {
+    width: 100%; 
+    height: 80%
+}
+
+.artist-card p {
+    text-align: center;
+    margin: 0 0;
+    color: white;
+}
+
+.artist-card button {
+    width: 60%;
+    border-radius: 5px;
+}
+
+button, a {
+    background-color: rgb(215, 105, 105);
+    color: white;
+    border-style: none;
+    padding: 3px;
+    display: block;
+}
+
+a {
+    border-radius: 5px;
+    text-decoration: none;
+    margin-bottom: 5px;
+}
+
+.track {
+    margin: auto;
+    width: 50%;
+    background-color: rgb(195, 195, 195);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}

views/albums.hbs

@@ -0,0 +1,9 @@
+<div style="display: flex; flex-wrap: wrap">
+{{#each albums }}
+    <div class="artist-card">
+        <img src="{{this.images.[0].url}}"></img>
+        <p>{{this.name}}</p>
+        <a href="/tracks/{{this.id}}">View Tracks</a>
+    </div>
+{{/each}}
+</div>

views/artist-search-results.hbs

@@ -0,0 +1,9 @@
+<div style="display: flex; flex-wrap: wrap">
+{{#each artists }}
+    <div class="artist-card">
+        <img src="{{this.images.[0].url}}"></img>
+        <p>{{this.name}}</p>
+        <a href="/albums/{{this.id}}">View Albums</a>
+    </div>
+{{/each}}
+</div>

views/index.hbs

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

views/layout.hbs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Express Spotify</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+  </head>
+  <body>
+    {{{ body }}} 
+  </body>
+</html>

views/tracks.hbs

@@ -0,0 +1,6 @@
+<div style="background-color: grey; width: 50%; margin: auto; font-size: 30px">Title</div>
+{{#each tracks }}
+    <div class="track">{{this.name}}
+    <audio src="{{this.preview_url}}" controls></audio>
+    </div>
+{{/each}}