Skip to content

Commit

Permalink
added compare artist based on popularity
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhiscoding
shubhiscoding committed Jan 27, 2024
1 parent 3c88fe2 commit 312c31f
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 2 deletions.
16 changes: 15 additions & 1 deletion Index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<span><p>Spotify Stats.</p></span>
</div>
<div class="nav-links">
<div class="cmprbtn"><a href="index.php">Compare Artists</a></div>
<div class="cmprbtn"><a href="#">Compare Artists</a></div>
<div class="artbtn"><a href="#">Artists Stats</a></div>
</div>
</div>
Expand Down Expand Up @@ -55,6 +55,20 @@ <h1>Search Your Artist</h1>
</div>
</div>
</section>
<section class="compare" id="compare">
<h1>Compare Your Artist</h1>
<div class="compare_contain">
<div class="input_box cmprinpt">
<input class="artist1" type="text" placeholder="Search By Artist Name">
<!-- <span>Or</span> -->
<input class="artist2" type="text" placeholder="Search By Artist URL">
<button class="compare_btn">Compare</button>
</div>
<div class="output" id="cmprout">

</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
82 changes: 82 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,4 +387,86 @@ input[type="text"] {
font-weight: bold;
margin-bottom: 0.3%;
margin-bottom: 0.3%;
}
.compare{
width: 100%;
height: 100%;
background-color: #13072e;
font-family: 'Poppins', sans-serif;
margin-top: 1%;
padding: 2% 5%;
}
.compare_contain{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background: linear-gradient(to bottom right, #13072e, #3f2182);
width: 100%;
height: 100%;
padding: 2% 3%;
}
.compare span{
visibility: hidden;
}
.compare_btn{
margin-right: 0;
margin-left: 0;
width: 9%;
height: 45px;
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;
}
.compare_btn:hover{
background-color: #b2abff;
transform: scale(1.06);
transition: transform 0.4s ease-in-out;
}
.compare_btn:not(hover){
transform: scale(1);
transition: transform 0.4s ease-in-out;
}
.cmprinpt input[type="text"] {
width: 40%;
margin-right: 0;
}
.artist2{
margin-left: 2%;
}
.cmprinpt{
display: flex;
width: 100%;
gap: 3%;
}
.compare_contain #cmprout{
display: flex;
justify-content: space-between;
width: 100%
}
.chart1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
background-color: #13072e;
}
.chart2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
background-color: #13072e;
}
108 changes: 107 additions & 1 deletion script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,17 @@ artbtn.addEventListener('click', function(){
searchSection.scrollIntoView({ behavior: 'smooth' });
});

const cmprbtn = document.querySelector('.cmprbtn');
cmprbtn.addEventListener('click', function(){
var compareSection = document.getElementById('compare');
compareSection.scrollIntoView({ behavior: 'smooth' });
});

const compare_artistbtn = document.querySelector('.compare_artistbtn');
compare_artistbtn.addEventListener('click', function(){
var compareSection = document.getElementById('compare');
compareSection.scrollIntoView({ behavior: 'smooth' });
});

async function getArtisturl(x) {
const name = x;
Expand Down Expand Up @@ -168,7 +178,6 @@ async function getArtist(url_temp) {
}).then(()=>{
accessToken().then((token)=>{
var url2 = url + '/top-tracks?market=US';

fetch(url2, {
headers: {
'Authorization': 'Bearer ' + token,
Expand Down Expand Up @@ -204,4 +213,101 @@ async function getArtist(url_temp) {
});
})
});
}

const artist1 = document.querySelector('.artist1');
const artist2 = document.querySelector('.artist2');
const compare_btn = document.querySelector('.compare_btn');
compare_btn.addEventListener('click', function(){
var artist1url;
var artist2url;
if(artist1.value && artist2.value){
var val1 = artist1.value;
var val2 = artist2.value;
if(val1.includes("https://open.spotify.com/artist/")){
console.log(val1);
}else{
const output = document.querySelector("#cmprout");
artist1url = getArtisturl(val1);
artist1url.then((result)=>{
popularity(result, output, "chart1");
return getArtisturl(val2);
}).then((result)=>{
popularity(result, output, "chart2");
});
}
}else{
window.alert("Fill Both Fields");
}
});

async function popularity(url_inp, x, y){
let ret;
console.log(url_inp+" chk url");
const ID = url_inp.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 chk = document.getElementsByClassName(y);
if(chk.length==0){
markechart(data.popularity, x, y, data.name);
}else{
x.removeChild(chk[0]);
markechart(data.popularity, x, y, data.name);
}
});
return ret;
});
return ret;
}

function markechart(popularity, x, y, name){
const chart = document.createElement('div');
chart.className = y;
x.appendChild(chart);
//chart creation
chart.innerHTML = `
<h1>${name}</h1>
<canvas id="${y}" width="100%" height="100%"></canvas>
<h3 style="margin-top:1%">Popularity in Spotify</h3>`;
console.log(x);
const artist_name = name;
var ctx = document.getElementById(y).getContext('2d');
// Define the data for the pie chart
var data = {
labels: [artist_name, 'Others'],
datasets: [{
data: [popularity, 100-popularity], // Values for each slice
backgroundColor: ['#9cd8fe', '#4c3a32']
}]
};

// Create the pie chart
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data
});
}

0 comments on commit 312c31f

Please sign in to comment.