Merge pull request #16 from nsettyy/tom

album art renders on page

assets/index.js

@@ -89,16 +89,22 @@ async function rapidData(event) {
 
       var trackTitles = result.tracks.hits[i].track.title;
       var songLinks = result.tracks.hits[i].track.url;
+      var artLinks = result.tracks.hits[i].track.images.coverart;
 
       console.log(trackTitles);
 
       var topTracks = document.createElement("li");
       var trackLinks = document.createElement("a");
+      var albumArt = document.createElement("img");
+
+      albumArt.setAttribute("src", artLinks);
+      albumArt.setAttribute("class", "album-art");
 
       trackLinks.textContent = trackTitles;
       trackLinks.setAttribute("href", songLinks);
       trackLinks.setAttribute("target", "_blank");
 
+      topTracks.append(albumArt);
       topTracks.append(trackLinks);
 
       displayTracks.append(topTracks);

assets/style.css

@@ -60,6 +60,15 @@ form {
     align-items: center;
 }
 
+li {
+    display: flex; 
+    /* justify-content: center; */
+    align-items: center;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+
 .title {
     color: var(--white);
     letter-spacing: .2rem;
@@ -75,6 +84,12 @@ form {
     border: none;
 }
 
+.album-art {
+    width: 80px;
+    height: 80px;
+    margin-right: 1rem;
+}
+
 #results {
     display: flex;
     /* flex-direction: column; */
@@ -107,6 +122,9 @@ form {
     color: var(--white);
     text-align: center;
     letter-spacing: .2rem;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
 }
 
 .hero-body {
@@ -131,6 +149,9 @@ h1 {
 
 h2 {
     font-size: 1.5rem;
+    letter-spacing: .2rem;
     border-bottom: 1px solid var(--white);
     margin-bottom: 1rem;
+    text-align: center;
+    color: var(--white)
 }

index.html

@@ -64,13 +64,14 @@ <h1 id="caption">Sound Scout</h1>
 
     <!-- TOP TRACKS SECTION -->
     <div id="toptrack-container" class="container is-fluid">
+
+      <h2>Top Tracks:</h2>
+
       <div class="notification">
 
-        <h2>Top Tracks:</h2>
+        <div id="artist-avatar"></div>
 
-        <ul id="top-tracks">
-
-        </ul>
+        <ul id="top-tracks"></ul>
 
       </div>
     </div>