-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
78 lines (73 loc) · 2.77 KB
/
app.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
const searchSongs = async () => {
const searchText = document.getElementById('search-field').value;
try{
const url = `https://api.lyrics.ovh/suggest/${searchText}`;
const response = await fetch(url)
const data = await response.json()
displaySongs(data.data)
}
catch(error){
errorText("Result Not Found!!")
}
}
const displaySongs = songs =>{
const songContainer = document.getElementById('song-container');
songContainer.innerHTML = ""
const errorText = document.getElementById("error-text");
errorText.style.display ="none";
songs.forEach(song => {
const songDiv = document.createElement('div');
songDiv.className = "single-result row align-items-center my-3 p-3"
songDiv.innerHTML = `
<div class="col-md-9">
<h3 class="lyrics-name">${song.title}</h3>
<p class="author lead">Album by <span>${song.artist.name}</span></p>
<audio controls>
<source src="${song.preview}" type="audio/mpeg">
</audio>
</div>
<div class="col-md-3 text-md-right text-center">
<button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button>
</div>
`
songContainer.appendChild(songDiv)
// console.log(song)
});
}
const getLyrics = (artist , title) =>{
const url = `https://api.lyrics.ovh/v1/${artist}/${title}`
fetch (url)
.then(res =>res.json())
.then(data => showLyrics(data.lyrics))
.catch( () => errorText("Opps!! Somthing Wrong. Try again Later."))
}
const showLyrics = songLyrics =>{
console.log(songLyrics)
if( songLyrics === ''){
errorText("Sorry! No Lyrics found for this song.")
}
else{
const lyricsArea = document.getElementById("lyrics-area");
lyricsArea.innerText = songLyrics;
}
}
const errorText = (error) => {
const errorText = document.getElementById("error-text");
errorText.innerHTML = ""
const errorDiv = document.createElement('div');
errorDiv.className = "single-result row align-items-center my-3 p-3"
errorDiv.innerHTML = `
<div class="col-md-9">
<h3 class="lyrics-name"><i class="fas fa-exclamation-circle error-note"></i> ${error}</h3>
</div>
<div class="col-md-3 text-md-right text-center">
<div onclick="colseTab()" class="btn btn-danger"><i class="fas fa-times"></i></div>
</div>
`
errorText.appendChild(errorDiv);
errorText.style.display= "block";
}
const colseTab = () => {
const errorText = document.getElementById("error-text");
errorText.style.display= "none";
}