> For the complete documentation index, see [llms.txt](https://meijer-nick1.gitbook.io/meesterproef/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meijer-nick1.gitbook.io/meesterproef/4-code/4.6-track-information.md).

# 4.6 - Track information

## Introduction

![Schermafbeelding 2020-06-17 om 17 13 45](https://user-images.githubusercontent.com/47485018/84916117-f1c8d600-b0bd-11ea-870f-d15a8107df8d.png) When users click on the information button information about the track appears on the screen: ![5124a01b754972ad2e545feacf051eaf](https://user-images.githubusercontent.com/47485018/84898458-92f86200-b0a7-11ea-977c-4536b71880f6.gif)

## How it works

This element also function within a MutationObserver similair to the [workspaceplaylist](https://github.com/Ringo-Pro/Ringo.Pro/wiki/Workspace-playlist#how-it-works):

```javascript
const observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
if(mutation){

// this is where the eventListeners are placed
...
}

const results = document.querySelector('.search-results')
const projectPage = document.querySelector('.project-page')

observer.observe(results, {
    childList: true,
    attributes: true,
    characterData: true,

})
observer.observe(projectPage, {
    childList: true,
    attributes: true,
    characterData: true,

})
})
```

The difference is that here we are looking to place click events at the info anchortags:

```javascript
        if(mutation){
            // when a mutation is observed reselect all track info links
            const anchorList = document.querySelectorAll('.track-info-link')

            anchorList.forEach(anchor => {
                // add a click event to each track info link
                anchor.addEventListener('click', function(event){
                    // prevent it from linking to a new page
                    event.preventDefault()
                    // make the track information element visible
                    document.querySelector('.track-information').style.display = 'block'

                    const trackId = anchor.id
                    // intercept the url the anchor tag is pointing at which is a track detail page
                    const url = anchor.getAttribute('href')
                    // fetch this url from the server and pass a query with the track id and token, the right track will be fetched from the spotify API on the server 
                    fetch(url + '?query=' + trackId + '&async=true' + '&token=' + token)
                        .then(res => res.text())
                        .then(html => {
                            // the response will be the component with the right data
                            const trackInfo = document.querySelector('.track-information')

                            // append the component to the trackInfo section
                            trackInfo.innerHTML = html
                            const closeButton = document.querySelectorAll('.close-button')

                            // make both close buttons clickable, and hides the trackInfo component
                            closeButton[0].addEventListener('click', () => {
                                trackInfo.style.display = 'none'
                            })
                            closeButton[1].addEventListener('click', () => {
                                trackInfo.style.display = 'none'
                            })


                        })

                })

            })

        }
```