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

1export const renderTopListener = () => {
2  let topListenerArtist = dummyData.top_100_listener.artist;
3  let topListenerAlbum = dummyData.top_100_listener.album;
4  let topListenerTrack = dummyData.top_100_listener.track;
5
6  if (topListenerArtist) {
7    document.querySelector(
8      "#introTopListenerArtistRank"
9    ).innerHTML = `<b>${getOrdinal(
10      topListenerArtist.rank
11    )}</b> top listener of this`;
12    document.querySelector(
13      "#topListenerArtistRank"
14    ).innerHTML = `You ranked #${topListenerArtist.rank} on Last.fm`;
15    document.querySelector(
16      "#topListenerArtistScrobbles"
17    ).innerHTML = `${topListenerArtist.scrobbles} scrobbles`;
18    document.querySelector("#topListenerArtistName").innerHTML =
19      topListenerArtist.name;
20
21    document
22      .querySelector("#topListenerArtistImage")
23      .setAttribute(
24        "src",
25        getImageUrl(topListenerArtist, null, null, "no_artist_fallback.jpg")
26      );
27  }
28
29  if (topListenerAlbum) {
30    document.querySelector(
31      "#introTopListenerAlbumtRank"
32    ).innerHTML = `You were the <b>${getOrdinal(
33      topListenerAlbum.rank
34    )}</b> top listener of this Album...`;
35    document.querySelector(
36      "#topListenerAlbumRank"
37    ).innerHTML = `You ranked #${topListenerAlbum.rank} on Last.fm`;
38    document.querySelector(
39      "#topListenerAlbumScrobbles"
40    ).innerHTML = `${topListenerAlbum.scrobbles} scrobbles`;
41    document.querySelector("#topListenerAlbumName").innerHTML =
42      topListenerAlbum.name;
43
44    document.querySelector("#topListenerAlbumArtistName").innerHTML =
45      topListenerAlbum.artist.name;
46
47    document
48      .querySelector("#topListenerAlbumImage")
49      .setAttribute(
50        "src",
51        getImageUrl(
52          topListenerAlbum,
53          topListenerAlbum.artist,
54          null,
55          "no_album_fallback.jpg"
56        )
57      );
58  }
59
60  if (topListenerTrack) {
61    document.querySelector(
62      "#introTopListenerTrackRank"
63    ).innerHTML = `You were the <b>${getOrdinal(
64      topListenerTrack.rank
65    )}</b> top listener of this Track...`;
66    document.querySelector(
67      "#topListenerTrackRank"
68    ).innerHTML = `You ranked #${topListenerTrack.rank} on Last.fm`;
69    document.querySelector(
70      "#topListenerTrackScrobbles"
71    ).innerHTML = `${topListenerTrack.scrobbles} scrobbles`;
72    document.querySelector("#topListenerTrackName").innerHTML =
73      topListenerTrack.name;
74
75    document.querySelector("#topListenerTrackArtistName").innerHTML =
76      topListenerTrack.artist.name;
77
78    document
79      .querySelector("#topListenerTrackImage")
80      .setAttribute(
81        "src",
82        getImageUrl(
83          topListenerTrack.album,
84          topListenerTrack.primary_album,
85          topListenerTrack.artist,
86          "no_track_fallback.jpg"
87        )
88      );
89  }
90};