-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
50 lines (42 loc) · 1.41 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const searchInput = document.getElementById("search-input");
const resultArtist = document.getElementById("result-artists");
const resultPlaylist = document.getElementById("result-playlist");
function requestApi(searchInput) {
const url = `https://api-spotify-artists.vercel.app/api/artists?name_like=${searchInput}`;
fetch(url)
.then((response) => response.json())
.then((result) => displayResults(result));
}
function displayResults(results) {
resultPlaylist.classList.add("hidden");
let resultHTML = "";
results.forEach((element) => {
resultHTML += `
<div class="artist-card">
<div class="card-img">
<img class="artist-img" src="${element.urlImg}"/>
<div class="play">
<span class="fa fa-solid fa-play"></span>
</div>
</div>
<div class="card-text">
<a title="${element.name}" class="vst" href=""></a>
<span class="artist-name" id="artist-name">${element.name}</span>
<span class="artist-categorie">Artista</span>
</a>
</div>
</div>
`;
});
resultArtist.innerHTML = resultHTML;
resultArtist.classList.remove("hidden");
}
document.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
if (searchTerm === "") {
resultPlaylist.classList.remove("hidden");
resultArtist.classList.add("hidden");
return;
}
requestApi(searchTerm);
});