Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8ef2632

Browse files
first commi r.m. busc. musica
1 parent 939708f commit 8ef2632

File tree

4 files changed

+251
-0
lines changed

4 files changed

+251
-0
lines changed
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const form = document.querySelector('#form');
2+
const searchInput = document.querySelector('#search');
3+
const songsContainer = document.querySelector('#songs-container');
4+
const prevAndNextContainer = document.querySelector('#prev-and-next-container');
5+
const apiAristURL = `https://www.vagalume.com.br`
6+
const apiSongURL = `https://api.vagalume.com.br`;
7+
// https://api.lyrics.ovh/suggest/linkin%20park
8+
// console.log({ form, searchInput, songsContainer, prevAndNextContainer });
9+
10+
// https://www.vagalume.com.br/linkin-park/index.js
11+
// https://api.vagalume.com.br/search.php?art=linkin-park&mus=In The End"
12+
// https://api.vagalume.com.br/search.php?art=linkin-park&mus=Numb"
13+
14+
/*
15+
"toplyrics": {
16+
"item": [
17+
{
18+
"id": "3ade68b6g145ceda3",
19+
"desc": "In The End",
20+
"url": "/linkin-park/in-the-end.html"
21+
},
22+
*/
23+
24+
const fetchSongs = async artist => {
25+
// fetch artist
26+
const response = await fetch(`${apiAristURL}/${artist}/index.js`)
27+
const artistJSON = await response.json();
28+
29+
// fetch song name
30+
const songName = artistJSON.artist.toplyrics.item[0].desc;
31+
console.log(songName)
32+
33+
// fetch song lyric
34+
const responseSong = await fetch(`${apiSongURL}/search.php?art=${artist}&mus=${songName}`)
35+
const songLyric = await responseSong.json();
36+
console.log(songLyric)
37+
}
38+
39+
form.addEventListener('submit', event => {
40+
event.preventDefault()
41+
42+
const searchArtist = searchInput.value.trim().toLowerCase()
43+
if(!searchArtist){
44+
songsContainer.innerHTML = `<li class="warning-message">Por favor, digite um termo válido!</li>`
45+
return
46+
}
47+
48+
fetchSongs(searchArtist);
49+
50+
// console.log(searchTerm);
51+
});
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const form = document.querySelector('#form');
2+
const searchInput = document.querySelector('#search');
3+
const songsContainer = document.querySelector('#songs-container');
4+
const prevAndNextContainer = document.querySelector('#prev-and-next-container');
5+
// https://api.lyrics.ovh/suggest/linkin%20park
6+
// console.log({ form, searchInput, songsContainer, prevAndNextContainer });
7+
8+
const fetchSongs = async artist => {
9+
10+
}
11+
12+
form.addEventListener('submit', event => {
13+
event.preventDefault()
14+
15+
const searchArtist = searchInput.value.trim().toLowerCase()
16+
if(!searchArtist){
17+
songsContainer.innerHTML = `<li class="warning-message">Por favor, digite um termo válido!</li>`
18+
return
19+
}
20+
21+
fetchSongs(searchArtist);
22+
});
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Lyrics Search</title>
6+
<link rel="stylesheet" href="./style.css">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>Busca letras</h1>
11+
12+
<form id="form">
13+
<input
14+
autofocus
15+
value="Coldplay"
16+
id="search"
17+
type="text"
18+
placeholder="Insira o nome do artista ou da música..."
19+
/>
20+
21+
<button>Buscar</button>
22+
</form>
23+
</header>
24+
25+
<ul id="songs-container" class="songs-container songs"></ul>
26+
27+
<div id="prev-and-next-container" class="prev-and-next-container"></div>
28+
29+
<script src="./app.js"></script>
30+
</body>
31+
</html>
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
*,
2+
*:after,
3+
*:before {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
li {
10+
list-style: none;
11+
}
12+
13+
body {
14+
background-color: #10161B;
15+
font-family: Arial, Helvetica, sans-serif;
16+
margin: 0;
17+
}
18+
19+
button {
20+
cursor: pointer;
21+
}
22+
23+
button:active {
24+
transform: scale(0.95);
25+
}
26+
27+
input:focus,
28+
button:focus {
29+
outline: none;
30+
}
31+
32+
header {
33+
background-image: url('https://images.unsplash.com/photo-1506157786151-b8491531f063?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
34+
background-repeat: no-repeat;
35+
background-size: cover;
36+
background-position: center center;
37+
color: #fff;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: center;
42+
padding: 100px 0;
43+
position: relative;
44+
}
45+
46+
header::after {
47+
content: '';
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
height: 100%;
52+
width: 100%;
53+
background-color: rgba(0, 0, 0, .4);
54+
}
55+
56+
header * {
57+
z-index: 1;
58+
}
59+
60+
header h1 {
61+
margin: 0 0 30px;
62+
}
63+
64+
form {
65+
position: relative;
66+
width: 500px;
67+
max-width: 100%;
68+
}
69+
70+
form input {
71+
border: 0;
72+
border-radius: 50px;
73+
font-size: 16px;
74+
padding: 15px 30px;
75+
width: 100%;
76+
}
77+
78+
form button {
79+
position: absolute;
80+
top: 2px;
81+
right: 2px;
82+
background-color: #8d56fd;
83+
border: 0;
84+
border-radius: 50px;
85+
color: #fff;
86+
font-size: 16px;
87+
padding: 13px 30px;
88+
}
89+
90+
.btn {
91+
background-color: #8d56fd;
92+
border: 0;
93+
border-radius: 10px;
94+
color: #fff;
95+
padding: 4px 10px;
96+
}
97+
98+
.songs-container {
99+
list-style-type: none;
100+
padding: 0;
101+
margin: 30px auto;
102+
max-width: 100%;
103+
width: 500px;
104+
background-color: #10161B;
105+
}
106+
107+
.song {
108+
display: flex;
109+
align-items: flex-start;
110+
justify-content: space-between;
111+
margin: 10px 0;
112+
}
113+
114+
.prev-and-next-container h2 {
115+
font-weight: 300;
116+
}
117+
118+
.prev-and-next-container {
119+
display: flex;
120+
justify-content: center;
121+
}
122+
123+
.prev-and-next-container button {
124+
transform: scale(1.3);
125+
margin: 15px;
126+
}
127+
128+
.warning-message {
129+
color: #EA2234;
130+
text-align: center;
131+
}
132+
133+
.song-artist {
134+
color: white;
135+
opacity: .4;
136+
max-width: 400px;
137+
}
138+
139+
.lyrics-container {
140+
color: white;
141+
opacity: .4;
142+
}
143+
144+
.lyrics {
145+
margin-top: 20px;
146+
line-height: 1.5;
147+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /