hard-rock-Assignment/script.js at master · Mahbub-Hasan1/hard-rock-Assignment · GitHub

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
let searchSong=document.getElementById('searchSong')
let searchSongBtn=document.getElementById('searchSongBtn')
let songSuggestionList = document.getElementById("songSuggestionList")
let lyricsSongSuggestionList = document.getElementById("lyricsSongSuggestionList")

// lyrics suggestion
searchSong.addEventListener("keypress",event=>{
    if(searchSong.value.length>0){
        searchSong.style.color="black"
    }

    let api=`https://api.lyrics.ovh/suggest/${event.target.value+event.key}`


    fetch(api)
    .then(res=>res.json())
    .then(data=>{

        for(let i=1; i<=10; i++){
           document.getElementById("title"+i).innerText=data.data[i].title
           document.getElementById("artist"+i).innerText=data.data[i].artist.name


           let title=data.data[i].title
            let artist=data.data[i].artist.name
            document.getElementById("lyricsBtn"+i).addEventListener("click",(event)=>{
               let api2=`https://api.lyrics.ovh/v1/${artist}/${title}`
                fetch(api2)
                .then(res=>res.json())
                .then(data=>{
                    let str=data.lyrics.split(" ")
                    let [a,b,c]=str
                    if(str.length>10){
                        document.getElementById("lyricsContentTitle").innerText=`${a} ${b} ${c}`
                    }else{
                        document.getElementById("lyricsContentTitle").innerText=`${a}`
                    }
                    document.getElementById("textContent").innerText=data.lyrics
                })
                document.getElementById("lyricsContent").style.display="block"
            })
        }
        songSuggestionList.style.display="block"
    })
})

// all matched lyrics

searchSongBtn.addEventListener('click',event=>{
    if(searchSong.value.length<1){

        let searchSong = document.getElementById("searchSong")
        searchSong.value="type a lyrics name"
        searchSong.style.color="red"
        document.getElementById("lyricsSongSuggestionList").style.display="none"


    }else{
        searchSong.style.color="black"
    let api = `https://api.lyrics.ovh/suggest/${searchSong.value}`
    document.getElementById("lyricsContent").style.display="none"
    for(let i=1; i<=15;i++){
        document.getElementById("textContent"+i).style.display="none"
    }
    fetch(api)
    .then(res=>res.json())
    .then(data=>{
        // console.log(data.data.length)
        if(data.data.length==0){
            document.getElementById("alertUnavailable").innerHTML=`<h4 style="color:red; text-align:center">We are so sorry that <br>
            this lyrics is not available, now</h4>`
        }else{
            for(let i=1; i<=data.data.length; i++){

                document.getElementById("lyricsTitle"+i).innerHTML=data.data[i].title
                document.getElementById("lyricsArtist"+i).innerHTML=data.data[i].artist.name
                lyricsSongSuggestionList.style.display="block"
                let count=1;
                document.getElementById("getLyricsBtn"+i).addEventListener("click",event=>{


                    let textContent=document.getElementById("textContent"+i)

                    let title=data.data[i].title
                    let artist=data.data[i].artist.name
                    let api2=`https://api.lyrics.ovh/v1/${artist}/${title}`
                    fetch(api2)
                    .then(res=>res.json())
                    .then(data=>{
                        // console.log(data.lyrics)
                        if(data.lyrics==undefined){
                            textContent.innerHTML=`<p style="color:red; text-align:center;">At this time, this lyrics is not available , Please try again later</p>`
                                textContent.style.display="block"

                        }else{
                            if(count%2!==0){
                                textContent.innerHTML=data.lyrics
                                textContent.style.display="block"

                                count++
                               }else{
                                textContent.style.display="none"
                                count++
                               }

                        }

                    })

                })

            }
        }
    })

    songSuggestionList.style.display="none"

}

})