-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
85 lines (72 loc) · 3.02 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const searchButton = document.getElementById('search-btn')
const searchText = document.getElementById('search-txt');
const searchResult = document.getElementById('search-result');
const songName = document.getElementById('song');
const artistName = document.getElementById('artist');
const songLyrics = document.getElementById('song-lyrics');
const outputView = document.getElementById('output');
// Search button addEventListener
searchButton.addEventListener("click", () => {
if (!searchText.value) {
const output = document.getElementById("myOutput");
output.style.display = "block";
window.onclick = function (event) {
if (event.target == output) {
output.style.display = "none";
}
}
outputView.innerHTML = `<h2>Please input your lyrics...</h2>`;
} else {
fetchValue(searchText.value);
}
});
// Search text addEventListener
searchText.addEventListener("keypress", (event) => {
if (event.keyCode == 13) {
fetchValue(searchText.value);
}
});
function fetchValue(search) {
fetch(`https://api.lyrics.ovh/suggest/${search}`)
.then(response => response.json())
.then(data => showData(data))
}
function showData(data) {
searchResult.innerHTML = `
${data.data.map(song => `
<div class="song-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 class="lyrics-name song-detail">Title : ${song.title}</h3>
<p class="author lead song-detail">Artist Name :<span> ${song.artist.name}</span></p>
<p class="author lead song-detail">Album :<span> ${song.album.title}</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button data-artist="${song.artist.name}" data-songtitle="${song.title}" class="btn btn-success">Get Lyrics</button>
</div>
</div>
`)
.join('')}
`;
}
// Search result addEventListener
searchResult.addEventListener('click', btn => {
if (btn.target.innerHTML === 'Get Lyrics') {
const artist = btn.target.getAttribute("data-artist");
const songTitle = btn.target.getAttribute("data-songtitle");
getLyrics(artist, songTitle);
}
})
// Get lyrics for song
async function getLyrics(artist, songTitle) {
const res = await fetch(`https://api.lyrics.ovh/v1/${artist}/${songTitle}`);
const data = await res.json();
const lyrics = data.lyrics;
const output = document.getElementById("myOutput");
output.style.display = "block";
window.onclick = function (event) {
if (event.target == output) {
output.style.display = "none";
}
}
outputView.innerHTML = `<h2><strong>${artist}</strong> - ${songTitle}</h2> <br/> <pre class="lyrics-text">${lyrics}</pre>`;
}