I do not know what is the problem with my code but it is not working , here is the code :
const inputKeywords = document.getElementById(‘input-keywords’);
const submitButton = document.getElementById(‘submit’);
const musicContainer = document.querySelector(".music-container");
submitButton.addEventListener(‘click’, () => {
getSongData();
})
async function getSongData() {
const url =https://shazam.p.rapidapi.com/search?term=${inputKeywords.value}&locale=en-US&offset-0&limit=5
;
const options = {
method: ‘GET’,
Headers: {
‘X-RapidAPI-Key’: ‘key’,
‘X-RapidAPI-Host’: ‘shazam.p.rapidapi.com’ ,
}
}
const response = await fetch(url, options);
const result = await response.json();
setSongDataDisplay(result);
}
function setSongDataDisplay(result) {
musicContainer.innerHTML = `
<div class = "container music-card">
<div class = "col">
<div>
<img src =${results.tracks.hits[0].track.images.coverart} alt =""class = "song-img" id = "song-img" >
<h4 id = "title">${results.tracks.hits[0].track.title}</h4>
<a herf=${results.tracks.hits[0].track.url} id = "url">${results.tracks.hits[0].track.url} </a>
</div>
<hr>
<div>
<img src =${results.tracks.hits[0].track.images.background} alt =""class = "artist-img" id = "artist-img" >
<p id="artist-text">${results.tracks.hits[0].track.subtitle}</p>
</div>
</div>
</div>
`;
}
Присоединяйтесь к обсуждению – добавьте комментарий ниже:
Hello,
1/ I am sorry that I cannot help you with coding.
2/ You are leaking your token key
3/ You can use an HTTP client such as postman.com to test the endpoint, and see whether or not it works.
Regards.