Resolve "Get top artists from API"

Closes #52 (closed)

assets/app.js

@@ -62,4 +62,52 @@ window.getPlaylists = function () {
     }
 };
 
+/* get artists and update form */
+window.getTopArtists = function () {
+    var containerElement = document.getElementById("user-top-artists");
+    if (containerElement) {
+        var htmlContent = "";
+
+        var apiUrl = "artists/top";
+        fetch(apiUrl)
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                const htmlTemplate = `
+                  <li class="col">
+                    <div class="custom-control custom-checkbox">
+                      <input
+                        type="checkbox"
+                        class="custom-control-input checkbox-artist"
+                        id="check-top-artist-ARTIST_ID"
+                        name="selected-artist[]"
+                        value="ARTIST_ID"
+                      >
+                      <label class="custom-control-label" for="check-top-artist-ARTIST_ID">
+                        <span class="spotify-image"><img src="ARTIST_IMAGE_URL" style="max-height: 1rem; max-width: 1rem;" /></span>
+                        ARTIST_NAME
+                      </label>
+                    </div>
+                  </li>
+                `;
+
+                data.forEach((artist) => {
+                    htmlContent += htmlTemplate
+                        .replace(/ARTIST_ID/g, artist["id"])
+                        .replace(/ARTIST_NAME/g, artist["name"])
+                        .replace(/ARTIST_IMAGE_URL/g, artist["imageUrl"]);
+                });
+                containerElement.innerHTML = htmlContent;
+            })
+            .catch(function (err) {
+                console.warn("Something went wrong.", err);
+                htmlContent =
+                    '<div class="alert alert-warning">Error fetching API data.</div>';
+                containerElement.innerHTML = htmlContent;
+            });
+    }
+};
+
 getPlaylists();
+getTopArtists();