diff --git a/Index.html b/Index.html index 2d7e1ca..010abf3 100644 --- a/Index.html +++ b/Index.html @@ -5,47 +5,56 @@ - - + + Music Stats Home -
-
-

Find Artist Stats

-
- - OR - -
- -
-
+
+
+ +
+
Compare Artists
+
Artists Stats
+
-
-
-
-
-
+
+
+
+ +
+
+

Artists Stats

 +

Cool Spotify hack alert! Dig up some juicy stats on your ultimate music icon or compare them to other legends based on fan base, popularity, and more. Get ready to discover some ear-tickling insights!

+
+
+ + +
+
+
+ hero +
-
-
-
-
- - - - +
+
+ + \ No newline at end of file diff --git a/album.js b/album.js deleted file mode 100644 index ede8334..0000000 --- a/album.js +++ /dev/null @@ -1,116 +0,0 @@ -async function getArtisturl() { - const ch = document.getElementById('artist_name_search').value; - if (!ch) { - return document.getElementById('artist').value.toString(); - } else { - const name = document.getElementById('artist_name_search').value; - const urlID = 'https://api.spotify.com/v1/search?q=' + name; - const url = urlID + '&type=artist&market=IN&include_external=audio'; - - const clientId = "827b37123b254ddfa210f3c730739654"; - const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; - - try { - const result = await fetch('https://accounts.spotify.com/api/token', { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), - }, - body: 'grant_type=client_credentials', - }); - - const data = await result.json(); - - const response = await fetch(url, { - headers: { - 'Authorization': 'Bearer ' + data.access_token, - }, - }); - - const artistData = await response.json(); - - if (artistData.artists && artistData.artists.items && artistData.artists.items[0] && artistData.artists.items[0].external_urls && artistData.artists.items[0].external_urls.spotify) { - //document.getElementById('url').innerText = artistData.artists.items[0].external_urls.spotify; - return artistData.artists.items[0].external_urls.spotify; - } else { - console.error('Error: Unable to retrieve artist URL'); - return null; // or handle this case accordingly - } - } catch (error) { - console.error('Error fetching artist data:', error); - return null; // or handle this case accordingly - } - } -} - -async function getAlbum() { - try { - const IDurl = await getArtisturl(); - const ID = IDurl.split('/')[4]; - const newID = ID.split('?')[0]; - const urlh = 'https://api.spotify.com/v1/artists/' + newID; - console.log(urlh); - const url2 = urlh + '/top-tracks?market=US'; - const clientId = "827b37123b254ddfa210f3c730739654"; - const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; - - const token = await getAccessToken(clientId, clientSecret); - - const response = await fetch(url2, { - headers: { - 'Authorization': 'Bearer ' + token, - }, - }); - - const data = await response.json(); - console.log(data); - document.getElementById('top_albums').style.backgroundColor = 'rgb(50 222 176)'; - document.getElementById('artist').style.backgroundColor = '#fff' - document.getElementById('artist_name_search').style.backgroundColor = '#fff' - document.getElementById('artist').style.color = 'rgb(7,7,7)' - document.getElementById('artist_name_search').style.color = 'rgb(7,7,7)' - document.getElementById('body').style.background = 'linear-gradient(rgb(7, 7, 7), rgb(57 160 174))'; - document.getElementById('top_albums').style.boxShadow = '5px 5px 5px rgba(74, 73, 73, 0.5), -6px -6px 5px rgba(218, 103, 103, 0.5)'; - document.getElementById('output').style.backgroundColor = '#32dade'; - document.getElementById('output').style.boxShadow = '5px 5px 5px rgba(196, 190, 190, 0.5), -5px -5px 5px rgba(137, 58, 58, 0.5)'; - document.getElementById('output').style.border = '1px solid #ccc'; - - document.getElementById('top_albums').innerHTML = - `Artist's Top Album: -
- - - - - Album name: ${data.tracks[0].album.name} -
-
- Release on Spotify: ${data.tracks[0].album.release_date} - Total tracks: ${data.tracks[0].album.total_tracks} -
`; - } catch (error) { - console.error('Error:', error); - } - } - - async function getAccessToken(clientId, clientSecret) { - try { - const result = await fetch('https://accounts.spotify.com/api/token', { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), - }, - body: 'grant_type=client_credentials', - }); - - const data = await result.json(); - return data.access_token; - } catch (error) { - throw new Error('Error fetching access token:', error); - } - } - - document.getElementById('btn').addEventListener('click', getAlbum); - diff --git a/img/Dark Blue Modern Geometric Simple Feature Section Website UI Prototype.png b/img/Dark Blue Modern Geometric Simple Feature Section Website UI Prototype.png new file mode 100644 index 0000000..59a599c Binary files /dev/null and b/img/Dark Blue Modern Geometric Simple Feature Section Website UI Prototype.png differ diff --git a/img/findstatsbtn.png b/img/findstatsbtn.png new file mode 100644 index 0000000..c09cd27 Binary files /dev/null and b/img/findstatsbtn.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..d4d429f Binary files /dev/null and b/img/logo.png differ diff --git a/img/people.png b/img/people.png new file mode 100644 index 0000000..670da4d Binary files /dev/null and b/img/people.png differ diff --git a/index.css b/index.css index 64641ce..031ef17 100644 --- a/index.css +++ b/index.css @@ -1,243 +1,390 @@ * { margin: 0; padding: 0; - box-sizing: border-box; /* Include padding and border in element's total width and height */ + box-sizing: border-box; } body { - font-family: 'Nova Square', sans-serif; - background-color: rgba(7, 7, 7); - /* background: linear-gradient(to bottom, #070707, #ae393f); */ - margin-left: 25x; - margin-right: 25px; + font-family: 'Poppins', sans-serif; + padding: 2% 5%; + background-color: #13072e; + padding: 0; + width: 100%; + color: white; } - -.head { - text-align: center; +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #13072e; + padding: 0 2%; + height: 10vh; + width: 100%; + /* position: fixed; */ } -h1 { - /* box-shadow: 3px 3px 3px rgba(14, 13, 13, 0.5), -3px -3px 3px rgba(46, 171, 159, 0.5); */ - color: rgb(57, 130, 142); - font-size: 3em; - font-weight: 500; - font-family: 'Arvo', serif; - margin-bottom: 10px; - text-align: center; - text-transform: uppercase; - text-shadow: 1px 1px 3px rgba(12, 12, 12, 0.5), -3px -3px 4px rgba(85, 89, 132, 0.5); +.nav-links { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 5%; + width: 100%; + font-family: 'Poppins', sans-serif; } -#btn { - background-color: rgb(57, 130, 142); /* Green background color */ - color: white; /* White text color */ - margin-top: 5px; - padding: 10px 20px; /* Padding for better spacing */ - font-size: 16px; /* Font size */ - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s; - width: 90%; +.nav-links a { + text-decoration: none; + color: white; + font-size: 1.3em; + transition: color 0.5s, transform 0.5s; /* Add transition for color and transform */ } - -#btn:hover { - box-shadow: 3px 3px 3px rgba(6, 6, 6, 0.5), -3px -3px 3px rgba(46, 167, 171, 0.5); - background-color: #459aa0; /* Darker green on hover */ +a{ + text-decoration: none; + color: #b2abff; +} +a:hover{ + color: #3f2182; +} +.nav-links .cmprbtn:hover{ + color: #b2abff; + transform: scale(1.1); + transition: transform 0.4s ease-in-out; +} +.nav-links .cmprbtn:not(:hover) { + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.nav-links .artbtn:hover{ + color: #b2abff; + transform: scale(1.1); + transition: transform 0.4s ease-in-out; +} +.nav-links .artbtn:not(:hover) { + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.nav-links .cmprbtn a:hover, +.nav-links .artbtn a:hover { + color: #b2abff;; + transition: 0.5s; } -.contain { +.logo { display: flex; - flex-direction: column; - - margin: 20px; + justify-content: flex-start; + color: aliceblue; + font-size: 2em; + align-items: center; + width: 80%; /* Set the logo to take up 20% of the width */ +} +.logo img:hover, +.logo img:hover + span { + color: #b2abff; + transform: scale(1.1); + transition: transform 0.4s ease-in-out; +} +.logo span:hover, +.logo span:hover ~ img { + color: #b2abff; + transform: scale(1.1); + transition: transform 0.4s ease-in-out; } -input[type="text"] { - box-shadow: 3px 3px 3px rgba(7, 7, 7, 0.5), -3px -3px 3px rgba(59, 161, 184, 0.5); - background-color: black; - color: rgb(50 222 176); - width: 46%; - padding: 10px; - margin: 8px 0; - box-sizing: border-box; - border: 1px solid rgb(50 222 176); - border-radius: 4px; - font-size: 14px; +.logo span:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.logo img:not(:hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; } -.Or { - color: rgb(57, 130, 142); - font-size: 3em; - font-weight: 500; - font-family: 'Arvo', serif; - margin-top: 5px; - text-align: center; - text-transform: uppercase; - text-shadow: 1px 1px 3px rgba(8, 8, 8, 0.5), -3px -3px 4px rgba(85, 89, 132, 0.5); +.logo img { + margin-right: 10px; /* Add some margin between the logo image and the text */ } -input[type="text"]:focus { - outline: none; - border-color: #1976D2; /* Change border color on focus */ +.contain { + width: 100%; + height: 100%; + background-color: #13072e; + font-family: 'Poppins', sans-serif; + padding: 2% 5%; } -/* Add this to your existing CSS */ -.output { +.home{ display: flex; - margin: 20px; - padding: 20px; - border-radius: 4px; - background-color:rgb(7, 7, 7); - font-size: 20px; - font-weight: bold; justify-content: space-between; + background: linear-gradient(to bottom right, #13072e, #3f2182); + width: 100%; + height: 100%; + padding: 2% 3%; + /* position: absolute; */ } - -#Profile { - width: 200px; /* Adjust the width as needed */ - margin-right: 20px; /* Add some space between the profile photo and text */ - flex-grow: 50; +.home-text{ + display: flex; + flex-direction: column; + justify-content: center; + gap: 5%; + width: 60%; + padding-top: 10%; + margin-left: 2%; } - -.stats { +.home-img{ + display: flex; + justify-content: flex-end; + margin-left: 0; + width: 100%; + transition: transform 0.6s ease-in-out; +} +.home-img img:hover{ + transform: scale(1.06); + transition: transform 0.8s ease-in-out; +} +.home-img img:not(:hover) { + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.texts{ display: flex; flex-direction: column; - flex-grow: 30; /* This will make the stats div take up all available space */ + justify-content: center; } - -.label { - color: #a33535; +.texts h1{ + font-size: 3em; + font-weight: bold; } -.url{ - width: 0px; - height: 0px; +.texts h1:hover{ + color: #b2abff; + transform: scale(1.04); + transition: transform 0.4s ease-in-out; } - -#artist_name { - color: #0c0c0c; - font-size: 1.5em; - font-family: 'Arvo', serif; +.texts h1:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.texts p:hover{ + color: #b2abff; + transform: scale(1.04); + transition: transform 0.4s ease-in-out; +} +.texts p:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.texts p{ + width: 85%; +} +.dis_stats { + display: inline-block; + padding: 2% 4%; + border-radius: 30px; + background-color: #b2abff; + color: #13072e; + text-align: center; + text-decoration: none; + font-size: 1.3em; + border: none; + outline: none; +} +.dis_stats:hover{ + background-color: #13072e; + color: #b2abff; + transform: scale(1.08); + transition: transform 0.4s ease-in-out; +} +.dis_stats:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.artist_statsbtn{ + display: inline-block; + align-items: center; + justify-content: space-arround; + padding: 3% 6%; + border-radius: 30px; + color: #b2abff; + background-color: white; + color: #13072e; + text-align: center; + text-decoration: none; + font-size: 1.2em; font-weight: bold; - margin: 0; - text-shadow: 2px 2px 4px rgba(232, 44, 44, 0.5); - text-transform: uppercase; + border: none; + outline: none; + width: warap-content; + cursor: pointer; } - -#album{ - color: #0c0c0c; +.compare_artistbtn{ + display: inline-block; + align-items: center; + margin-left: 5%; + justify-content: space-arround; + padding: 3% 6%; + border-radius: 30px; + color: #b2abff; + background-color: white; + color: #13072e; + text-align: center; + text-decoration: none; font-size: 1.2em; - font-family: 'Arvo', serif; - text-shadow: 2px 2px 4px rgba(232, 44, 44, 0.5); - /* margin-top: 0px;*/ - margin-bottom: 10px; - /* text-align: center; - justify-content: center; - align-items: center; */ - /* text-transform: uppercase; */ + font-weight: bold; + border: none; + outline: none; + width: warap-content; + cursor: pointer; +} +.artist_statsbtn:hover{ + background-color: #b2abff; + transform: scale(1.06); + transition: transform 0.4s ease-in-out; +} +.compare_artistbtn:hover{ + background-color: #b2abff; + transform: scale(1.06); + transition: transform 0.4s ease-in-out; } -#followers { - font-size: 1.2em; /* Adjust the font size as needed */ - margin-top: 10px; /* Add some space between name and followers */ +.artist_statsbtn:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; } -#top_albums { - box-shadow: 0px 0px 0px rgba(74, 73, 73, 0.5), -0px -0px 0px rgba(218, 103, 103, 0.5); +.compare_artistbtn:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.search{ + width: 100%; + height: 100%; + background-color: #13072e; + font-family: 'Poppins', sans-serif; + margin-top: 1%; + padding: 2% 5%; +} +.search h1{ + font-size: 3em; + font-weight: bold; + margin-bottom: 1%; + margin-left: 1%; + margin-top: 0.5%; +} +.search h1:hover{ + color: #b2abff; + transform: scale(1.03); + transition: transform 0.8s ease-in-out; +} +.search h1:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.search_contain{ display: flex; flex-direction: column; + justify-content: space-between; + background: linear-gradient(to bottom right, #13072e, #3f2182); + width: 100%; + height: 100%; + padding: 2% 3%; +} +.input_box{ + width: 100%; + padding: 2% 0%; + padding-left: 3%; + background: linear-gradient(to right, #2d2d77, #1c1c43); + border: #b2abff; + border-radius: 20px; +} +.input_box span{ + margin-left: 1%; + margin-right: 1%; + color: #b2abff; + font-size: 1.8em; + font-weight: bold; +} +input[type="text"] { + background-color: rgb(248, 244, 244); + color: rgb(0, 5, 4); + width: 40%; + height: 45px; + padding: 10px; + margin: 8px 0; + box-sizing: border-box; + border: 1px solid rgb(50 222 176); + border-radius: 20px; + font-size: 14px; +} +.search_btn{ + margin-right: 0; + margin-left: 2%; + width: 9%; + padding: 1% 2%; + border-radius: 30px; + color: #b2abff; + background-color: white; + color: #13072e; + text-align: center; + text-decoration: none; + font-weight: bold; + border: none; + outline: none; + cursor: pointer; +} +.search_btn:hover{ + background-color: #b2abff; + transform: scale(1.06); + transition: transform 0.4s ease-in-out; +} +.search_btn:not(hover){ + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.output{ + display: flex; justify-content: space-evenly; - align-items: start; - background-color: rgb(7, 7,7); - font-size: 1.2em; /* Adjust the font size as needed */ - padding-left: 5px; - flex: 110; + gap: 1%; + padding: 1% 2%; } - -.search{ +.artist_profile{ display: flex; - flex-direction: row; - justify-content: space-between; - margin-left: 15px; - margin-right: 15px; + flex-direction: column; + width: 100%; } - -#albumimg a{ +.top_album{ display: flex; flex-direction: column; - align-items: center; + width: 100%; } -img { - box-shadow: 5px 5px 5px rgba(220, 91, 91, 0.5), -5px -5px 5px rgba(121, 121, 121, 0.5); +.artist_img{ + display: flex; + justify-content: center; + width: 100%; + height: 320px; + background-color: #13072e; } - - -#spotify_link img{ - margin-top: 2px; - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0); +.album_img{ + display: flex; + justify-content: center; + width: 100%; + height: 320px; + background-color: #13072e; + /* transform: scale(1.1); */ } -#artist_name img{ - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0); +.piechart{ + width: 100%; + height: 100%; + margin-bottom: 0.3%; } -#albumimg{ +.pie_img{ display: flex; flex-direction: column; align-items: center; + justify-content: center; + width: 100%; + margin-bottom: 0.3%; + background-color: #13072e; } -#album_name{ - color: #3c0a0a; - font-size: 0.8em; /* Adjust the font size as needed */ +.piechart h3{ + font-size: 1.5em; font-weight: bold; - margin-top: 5px; -} - -.album_info{ - display: flex; - flex-direction: column; - color: #080808; - align-items: start; - font-family: 'Nova Square', sans-serif; - font-size: 0.7em; /* Adjust the font size as needed */ - font-weight: 550; -} - -@media screen and (max-width: 1000px) { - .output { - display: flex; - flex-direction: column; - column-gap: 5px; - margin-top: 20px; - margin-bottom: 20px; - padding-top: 20px; - padding-bottom: 20px; - justify-content: center; - align-items: center; - } - .stats{ - margin-top: 10px; - margin-bottom: 10px; - } - #top_albums { - margin-top: 15px; - } - body{ - margin: 0px; - /* background: linear-gradient(to bottom, #070707, #ae393f); */ - } - .search{ - display: flex; - flex-direction: column; - gap: 0px; - justify-content: center; - align-items: center; - } - .Or{ - margin-top: 0px; - margin-bottom: 0px; - } - input[type="text"] { - width: 100%; - } - #Profile { - margin-right:0px; - } -} + margin-bottom: 0.3%; + margin-bottom: 0.3%; +} \ No newline at end of file diff --git a/script.js b/script.js index 7ee6323..4e97e52 100644 --- a/script.js +++ b/script.js @@ -1,97 +1,207 @@ -async function getArtisturl() { - const ch = document.getElementById('artist_name_search').value; - if (!ch) { - return document.getElementById('artist').value.toString(); - } else { - const name = document.getElementById('artist_name_search').value; - const urlID = 'https://api.spotify.com/v1/search?q=' + name; - const url = urlID + '&type=artist&market=IN&include_external=audio'; - - const clientId = "827b37123b254ddfa210f3c730739654"; - const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; - - try { - const result = await fetch('https://accounts.spotify.com/api/token', { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), - }, - body: 'grant_type=client_credentials', - }); - - const data = await result.json(); - - const response = await fetch(url, { - headers: { - 'Authorization': 'Bearer ' + data.access_token, - }, - }); - - const artistData = await response.json(); - - if (artistData.artists && artistData.artists.items && artistData.artists.items[0] && artistData.artists.items[0].external_urls && artistData.artists.items[0].external_urls.spotify) { - return artistData.artists.items[0].external_urls.spotify; - } else { - console.error('Error: Unable to retrieve artist URL'); - return null; // or handle this case accordingly - } - } catch (error) { - console.error('Error fetching artist data:', error); - alert('Error fetching artist data:', error); - return null; // or handle this case accordingly - } - } -} - - -async function getArtist() { - const IDurl = await getArtisturl(); - console.log(IDurl); - const ID = IDurl.split('/')[4]; - const url = 'https://api.spotify.com/v1/artists/' + ID; - - const clientId = "827b37123b254ddfa210f3c730739654"; - const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; - const spotifyImg = "https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_RGB_Black.png"; - - const accessToken = async () => { - const result = await fetch('https://accounts.spotify.com/api/token', { - method: 'POST', - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), - }, - body: 'grant_type=client_credentials', - }); - - const data = await result.json(); - return data.access_token; - }; - - // Use the access token inside the fetch call - accessToken() - .then((token) => { - fetch(url, { - headers: { - 'Authorization': 'Bearer ' + token, - }, - }) - .then(response => response.json()) - .then(data => { - // Update your HTML elements with the retrieved data - document.getElementById('Profile').innerHTML = ``; - document.getElementById('artist_name').innerHTML = `${data.name} `; - document.getElementById('followers').innerHTML = `Followers: ${data.followers.total}`; - document.getElementById('popularity').innerHTML = `Popularity on Spotify: ${data.popularity}%`; - document.getElementById('genres').innerHTML = `Genres: ${data.genres.join(', ')}`; - }) - .catch(error => { - console.error('Error fetching artist data:', error); - }); - }) - .catch(error => { - console.error('Error fetching access token:', error); - }); -} -document.getElementById('btn').addEventListener('click', getArtist); +const artistname = document.querySelector('.artistname'); +const artisturl = document.querySelector('.artisturl'); +const search_btn = document.querySelector('.search_btn'); +search_btn.addEventListener('click', function(){ + if(artistname.value && artisturl.value){ + window.alert("Fill Only One Field"); + }else if(artistname.value.length==0 && artisturl.value.length==0){ + window.alert("Fill Atleast One Field"); + }else{ + var url_temp=""; + var url_fun; + if(artisturl.value){ + url_temp = String(artisturl.value); + getArtist(url_temp); + } + if(artistname.value){ + url_fun = getArtisturl(artistname.value); + url_fun.then((result)=>{ + url_temp = result; + getArtist(url_temp); + }) + } + } +}); + +const artist_statsbtn = document.querySelector('.artist_statsbtn'); +artist_statsbtn.addEventListener('click', function(){ + var searchSection = document.getElementById('search'); + searchSection.scrollIntoView({ behavior: 'smooth' }); +}); +const artbtn = document.querySelector('.artbtn'); +artbtn.addEventListener('click', function(){ + var searchSection = document.getElementById('search'); + searchSection.scrollIntoView({ behavior: 'smooth' }); +}); + + + +async function getArtisturl(x) { + const name = x; + console.log(name); + const urlID = 'https://api.spotify.com/v1/search?q=' + name; + const url = urlID + '&type=artist&market=IN&include_external=audio'; + const clientId = "827b37123b254ddfa210f3c730739654"; + const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; + + try { + const result = await fetch('https://accounts.spotify.com/api/token', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), + }, + body: 'grant_type=client_credentials', + }); + + const data = await result.json(); + + const response = await fetch(url, { + headers: { + 'Authorization': 'Bearer ' + data.access_token, + }, + }); + + const artistData = await response.json(); + + if (artistData.artists && artistData.artists.items && artistData.artists.items[0] && artistData.artists.items[0].external_urls && artistData.artists.items[0].external_urls.spotify) { + var chk = artistData.artists.items[0].external_urls.spotify.toString(); + console.log(chk+" chk function"); + return chk; + } else { + console.error('Error: Unable to retrieve artist URL'); + return null; // or handle this case accordingly + } + } catch (error) { + console.error('Error fetching artist data:', error); + alert('Error fetching artist data:', error); + return null; // or handle this case accordingly + } +} +async function getArtist(url_temp) { + console.log(url_temp+" chk url"); + const ID = url_temp.split('/')[4]; + console.log(ID+" chk ID"); + const url = 'https://api.spotify.com/v1/artists/' + ID; + console.log(url); + const clientId = "827b37123b254ddfa210f3c730739654"; + const clientSecret = 'f50082f5547f47dfa555c117f9e2e396'; + const accessToken = async () => { + const result = await fetch('https://accounts.spotify.com/api/token', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret), + }, + body: 'grant_type=client_credentials', + }); + + const data = await result.json(); + return data.access_token; + }; + accessToken().then((token) => { + fetch(url, { + headers: { + 'Authorization': 'Bearer ' + token, + }, + }) + .then(response => response.json()) + .then(data => { + console.log(data); + const output = document.querySelector(".output"); + output.innerHTML = + `
+
+
+

${data.name}

+

Followers: ${data.followers.total.toLocaleString()}

+

Popularity: ${data.popularity}%

+

Genres: ${data.genres.join(', ')}

+

Spotify URL: Click Here

+
+
+
+
+
+
+
` + const profimg = document.querySelector(".artist_img"); + const img = data.images; + var artimg; + var ch =0; + for(var i=0;iartist image`; + + //chart creation + const chart = document.querySelector(".pie_img"); + chart.innerHTML = ` +

Popularity in Spotify

`; + const chartimg = document.getElementById('myPieChart'); + const artist_name = data.name; + var ctx = document.getElementById('myPieChart').getContext('2d'); + // Define the data for the pie chart + var data = { + labels: [artist_name, 'Others'], + datasets: [{ + data: [data.popularity, 100-data.popularity], // Values for each slice + backgroundColor: ['#9cd8fe', '#4c3a32'] + }] + }; + + // Create the pie chart + var myPieChart = new Chart(ctx, { + type: 'pie', + data: data + }); + }) + .catch(error => { + console.error('Error fetching artist data:', error); + }); + }).then(()=>{ + accessToken().then((token)=>{ + var url2 = url + '/top-tracks?market=US'; + + fetch(url2, { + headers: { + 'Authorization': 'Bearer ' + token, + }, + }).then(response2 => response2.json()) + .then(data2 => { + console.log(data2); + const top_album = document.querySelector(".top_album"); + top_album.innerHTML = `
+
+

${data2.tracks[0].album.name}

+

Release Date: ${data2.tracks[0].album.release_date}

+

Popularity: ${data2.tracks[0].popularity}%

+

No. Of Tracks: ${data2.tracks[0].album.total_tracks}

+

Spotify URL: Click Here

+
`; + const albumimg = document.querySelector(".album_img"); + const img2 = data2.tracks[0].album.images; + var albmimg; + var ch2=0; + for(var i =0; i + album image`; + }).catch(error => { + console.error('Error fetching artist data:', error); + }); + }) + }); +} \ No newline at end of file