-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (111 loc) · 6.09 KB
/
index.html
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
122
123
124
125
126
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="input-music" type="text" class="form-control" placeholder="Enter artist or song name">
<button id="search-music" class="btn btn-success search-btn">Search</button>
</div>
</div>
<div id="all-results" class="search-result col-md-8 mx-auto py-4">
</div>
<div id="lyrics">
</div>
</main>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
document.getElementById('search-music').addEventListener('click', searchMusic);
function searchMusic(){
document.getElementById('all-results').innerHTML = '';
document.getElementById('lyrics').innerHTML = '';
const inputMusic = document.getElementById('input-music');
const keyword = inputMusic.value;
fetch(`https://api.lyrics.ovh/suggest/${keyword}`)
.then(res => res.json())
.then(data => {
storedData = data;
console.log(data);
for (let i = 0; i < data.data.length; i++) {
const title = data.data[i].title;
const artistName = data.data[i].artist.name;
const id = data.data[i].id;
document.getElementById('all-results').innerHTML += `<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-6">
<h3 class="lyrics-name">${title}</h3>
<p class="author lead">Album by <span>${artistName}</span></p>
</div>
<div class="col-md-6 text-md-right text-center">
<a href="#lyrics"><button onClick="getLyrics(${id})" class="btn btn-success">Get Lyrics</button></a>
</div>
</div>`
if(i == 9){
break;
}
}
})
}
function getLyrics(id){
for (let i = 0; i < 10; i++) {
if(storedData.data[i].id == id){
const artistName = storedData.data[i].artist.name;
const songTitle = storedData.data[i].title;
fetch(`https://api.lyrics.ovh/v1/${artistName}/${songTitle}`)
.then(res => res.json())
.then(data => {
let lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, '<br>');
if(lyrics == undefined){
lyrics = `Sorry, Lyrics Not Found`;
}
document.getElementById('lyrics').innerHTML = `<div class="single-lyrics text-center">
<h2 class="text-success mb-4">Song Lyrics</h2>
<h5>${lyrics}</h5>
<button class="btn btn-success"><a class="nav-link text-white" href="#">Go Top <span class="sr-only">(current)</span></a></button>
<button class="btn btn-success" onClick="goBack()"><a class="nav-link text-white" href="#">Go Back<span class="sr-only">(current)</span></a></button>
</div>`
})
}
}
document.getElementById("all-results").style.display= "none"
}
function goBack(){
document.getElementById("all-results").style.display= "block"
document.getElementById("lyrics").style.display= "none"
}
</script>
</body>
</html>