-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
108 lines (106 loc) · 3.8 KB
/
main.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const takeInfo=(artistInfo)=>{
const artistName = artistInfo[0]["result"]["primary_artist"]["name"];
const fullTitle = artistInfo.map(title => title["result"]["full_title"]);
const artistImageUrl = artistInfo[0]["result"]["primary_artist"]["image_url"];
const textSongUrl = artistInfo.map(textUrl => textUrl["result"]["url"]);
return {
"name": artistName,
"fullTitle": fullTitle,
"artistImageUrl": artistImageUrl,
"textSongUrl": textSongUrl,
};
};
const addArtistName=(date)=>{
const h2Artist = document.createElement("h2");
const artistNode = document.createTextNode(date);
h2Artist.appendChild(artistNode);
return h2Artist;
};
const addArtistImage=(date)=>{
const imageArtist = document.createElement("img");
imageArtist.id = "artist_photo";
imageArtist.src = date["artistImageUrl"];
return imageArtist;
};
const changeSection = () => {
const sect = document.querySelector(".result-box");
sect.parentNode.removeChild(sect);
const creatSect = document.createElement("section");
const body = document.querySelector("body");
const footer= body.querySelector("footer");
creatSect.className = "result-box";
body.insertBefore(creatSect, footer);
};
const addSongs=(date)=>{
console.log(date["fullTitle"]);
const section=document.getElementsByClassName("result-box");
const allPindex=[];
for (index in date["fullTitle"]){
const pIndex=document.createElement('p');
pIndex.className="index";
const nodeP = document.createTextNode(parseInt(index) + 1);
pIndex.appendChild(nodeP);
allPindex.push(pIndex);
};
const allPtitle = date["fullTitle"].map(title=>{
const pIndex = document.createElement('p');
pIndex.className = "title";
const nodeP = document.createTextNode(title);
pIndex.appendChild(nodeP);
return pIndex;
});
const allPlyrics = date["textSongUrl"].map(lyrics => {
const aUrl = document.createElement('a');
aUrl.className = "lyrics";
aUrl.href = lyrics;
aUrl.target="_blank"
const nodeA = document.createTextNode("Lyrics");
aUrl.appendChild(nodeA);
return aUrl
});
section[0].appendChild(addArtistName(date["name"]));
section[0].appendChild(addArtistImage(date));
for (let i in allPindex){
const divSong = document.createElement("div");
divSong.className = "song-box";
divSong.appendChild(allPindex[i]);
divSong.appendChild(allPtitle[i]);
divSong.appendChild(allPlyrics[i]);
section[0].appendChild(divSong);
}
};
const searchArtist=()=>{
const searchbtn = document.querySelector(".btn-srch");
const input = document.querySelector(".artist_srch");
const search = (event) => {
event.preventDefault();
changeSection();
const inputValue = input.value;
artistRequest(inputValue);
};
searchbtn.addEventListener('click', search);
};
const artistRequest=(aritstName="Sarius")=>{
const link = "https://genius.p.rapidapi.com/search?q=";
const url = link + aritstName;
fetch(url, {
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "805ba8d40emsh1fa9031abdd8f01p126a10jsn3c81c5dab3d8"
}
})
.then(response => response.json()
).then(response => response["response"]["hits"]
).then(response => {
const artist=takeInfo(response);
addSongs(artist);
}).catch(err => {
console.log(err);
});
};
const main=()=>{
searchArtist()
artistRequest();
}
main()