• Add Album Art content
• Add fa icons for Album and Artist label
• Add container class

• Fix heights in album art cards for responsive design

• Create an instance of Axios
• Create Artist Endpoints
• Create Album Endpoint
• Create Track Endpoint
• Create Search Endpoint
• Test Endpoints

Just leave a back button for going back to the home

Create functions that works as templates like:

trackTemplate(track){
 return //... your html here
}

so you can consume it in a reduce as:
tracks.reduce((acc, track) => acc + trackTemplate(track),"");

or as an unique template like:
artistHeader.innerHTML = headerTemplate(artist);

Note: Take that as an example an not as a representation of the final result.

We should revoke that api key and create a secrets.json to store the new API Key.
secrets.json must not be tracked, so we need to include it on .gitignore

• Add input with magnify icon
• Add container
• Replace style="min-height: 50px" with a class

• Display Artwork
• Display Tracklist
• Display Album info

• Play the music selected
• Volume controls
• Next/Prev/Replay controls
• Random selection (toggle button)
• Queue list (from album) not visible
• Auto play the next song when a song ends

if the queue list its over, stop all actions

I'ts not returning the properly value for some tracks.

That function just calculates the minutes but not the seconds.

duration / 60 = the integer of this expression is the minutes. Now multiply the decimals by 60 and you get the seconds.

• Create mutable list

Take an example of:

<ul class="list">
    <li class="list-item" data-artistId="1">
        <div class="flex grow">
            <div class="list-item-image">
                <img src="path/to/dua" alt="Profile Dua Lipa" />
            </div>
            <div class="flex grow column">
                <p class="title">Dua Lipa</p>
                <p class="subtitle">"5k followers</p>
            </div>
            <div class="flex center">
                <i class="fa fa-more"></i>
            </div>
        </div>
    </li>
</ul>

The loader is centering on the top of the page. We need it at the middle of it.

• get static assets for (aside) artist profile images
• get static assets for (body) cover arts

To-Do

• Artist info page
• Most famous tracks
• Most famous albums
• Other related artists

After that

• Display the artist page and hide the others center containers
• Home button has to hide the artist page

• Add markup for Search Page
• Add debounce functionality to search bar
• Add dynamical rendering for search results

To-Do

• Display a loader meanwhile is fetching an album
• Do the same while is fetching the track list