lab done

app.js

@@ -5,6 +5,8 @@ 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');
@@ -13,6 +15,64 @@ 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) => {
+    res.render('index.hbs')
+});
+
+
+app.get('/artist-search', (req, res) => {
+    spotifyApi
+    .searchArtists(req.query.artist)
+    .then(data => {
+      console.log('The received data from the API: ', data.body.artists.items);
+      // ----> 'HERE'S WHAT WE WANT TO DO AFTER RECEIVING THE DATA FROM THE API'
+      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) => {
+    // .getArtistAlbums() code goes here
+    console.log(req.params.artistId);
+    spotifyApi
+    .getArtistAlbums(req.params.artistId)
+    .then(data => {
+        console.log(data.body.items[0]);
+        //console.log('Albums received from the API:', data.body.items)
+        res.render('albums', {
+            artistName: data.body.items[0].artists[0].name ,
+            albums: data.body.items
+          })
+        })
+        .catch(err => console.log('The error while fetching albums occurred:', err))
+  });
+
+  app.get('/tracks/:albumId', (req, res) => {
+    spotifyApi
+    .getAlbumTracks(req.params.albumId)
+    .then(data => {
+        console.log('tracks received from the API:', data.body.items)
+        res.render('tracks', {
+            tracks : data.body.items
+        })
+    })
+  })
+
+
+
 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,60 @@
+html{
+    height: 100%;
+    width: 100%;
+  }
+  body{
+    background-image: url(/images/spotify-background.jpeg);
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .index-form-container{
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+  }
+  .index-form-container form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 640px;
+    height: 300px;
+    background-color: rgb(235 225 224 / 39%);
+  }
+  .index-form-container form input{
+    margin:10px;
+  }
+
+  .artist-items{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .artist-item{
+    display: flex;
+    flex-wrap: wrap;
+    width: fit-content;
+    flex-direction: column;
+    margin: 30px;
+    align-items: center;
+    background-color: grey;
+
+  }
+
+  .artist-item img{
+    height: 235px;
+    width: 235px;
+  }
+
+  .track{
+    display: flex;
+    margin: 20px;
+    background-color: rgb(235 225 224 / 39%);
+    border-radius: 3%;
+    justify-content: space-between;
+    padding: 12px;
+  }

views/albums.hbs

@@ -0,0 +1,10 @@
+<h1>Albums for: {{artistName}}</h1>
+<div class="artist-items">
+    {{#each albums}}
+         <div class="album artist-item">
+             <h2>{{name}}</h2>
+            <img src="{{images.[0].url}}" alt=" Album Cover of {{name}}">
+             <button><a href="/tracks/{{id}}"> View Songs</a></button>
+        </div>
+    {{/each}}
+</div>

views/artist-search-results.hbs

@@ -0,0 +1,11 @@
+
+<div class="artist-items">
+    {{#each artists}}
+         <div class="artist-item">
+            <img src="{{images.[0].url}}" alt=" Image of {{name}}">
+         <p>{{name}}</p>
+         <button><a href="/albums/{{id}}"> View Albums</a></button>
+        </div>
+    {{/each}}
+</div>
+

views/index.hbs

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

views/layout.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/styles/style.css">
+    <title>Document</title>
+</head>
+<body>
+    {{{ body }}}
+</body>
+</html>

views/tracks.hbs

@@ -0,0 +1,10 @@
+{{#each tracks}}
+    <div class="track">
+            <p>{{name}}</p>
+            {{#if preview-url}}
+            <audio src="{{preview_url}}"></audio>
+            {{else}}
+            <div>Doesnt have a preview linkg</div>
+            {{/if}}
+    </div>
+{{/each}}