https://gv-lastfm-playground.vercel.app/js/TopAlbumsQuilt.js

1if (dummyData.top_item_charts && dummyData.top_item_charts.top_albums) {
2  var getImage = (imageId) => {
3    var url = "https://lastfm.freetls.fastly.net/i/u/avatar300s/" + imageId;
4    return url;
5  };
6
7  var createQuilt = (numberOfAlbums) => {
8    numberOfAlbums = parseInt(numberOfAlbums);
9    var topAlbums = dummyData.top_item_charts.top_albums.slice(
10      0,
11      numberOfAlbums
12    );
13    width = 25;
14    switch (numberOfAlbums) {
15      case 9:
16        width = 33.333333;
17        break;
18      case 16:
19        width = 25;
20        break;
21      case 25:
22        width = 20;
23        break;
24    }
25    var quilt = "";
26    topAlbums.forEach(function (album) {
27      quilt +=
28        '<div class="quilt-img" style="background-image: url(' +
29        getImage(album.main_image.image_id) +
30        "), url(../assets/no_album.jpg); padding: " +
31        width / 2 +
32        '%" >' +
33        "</div>";
34    });
35
36    return '<div id="quilt" class="quilt">' + quilt + "</div>";
37  };
38
39  var selectedNumber = document.querySelector(
40    'input[name="toggle"]:checked'
41  ).value;
42
43  var newQuilt = (numberOfAlbums) => {
44    document.getElementById("top-albums").innerHTML =
45      createQuilt(numberOfAlbums);
46    document.getElementById("quilt-header").innerHTML =
47      "<h2>Your top " + numberOfAlbums + " Albums</h2>";
48  };
49
50  document.getElementById("top-albums").innerHTML = createQuilt(selectedNumber);
51}