Skip to content

Commit

Permalink
updated UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhiscoding
shubhiscoding committed Jan 27, 2024
1 parent da4e83c commit 492a775
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 14 deletions.
4 changes: 2 additions & 2 deletions Index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ <h1>Search Your Artist</h1>
<h1>Compare Your Artist</h1>
<div class="compare_contain">
<div class="input_box cmprinpt">
<input class="artist1" type="text" placeholder="Search By Artist Name">
<input class="artist2" type="text" placeholder="Search By Artist URL">
<input class="artist1" type="text" placeholder="1st Artist Name or URL">
<input class="artist2" type="text" placeholder="2nd Artist Name or URL">
<button class="compare_btn">Compare</button>
</div>
<div class="output" id="cmprout">
Expand Down
23 changes: 17 additions & 6 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,9 +340,13 @@ input[type="text"] {
}
.output{
display: flex;
visibility: hidden;
justify-content: space-evenly;
background-color: #13072e;
gap: 1%;
padding: 1% 2%;
border-radius: 30px;
margin-top: 0.3%;
}
.artist_profile{
display: flex;
Expand Down Expand Up @@ -370,8 +374,8 @@ input[type="text"] {
/* transform: scale(1.1); */
}
.piechart{
width: 100%;
height: 100%;
width: 70%;
height: 70%;
margin-bottom: 0.3%;
}
.pie_img{
Expand Down Expand Up @@ -476,26 +480,27 @@ input[type="text"] {
}
.compare_contain #cmprout{
display: flex;
visibility: hidden;
justify-content: space-evenly;
width: 100%;
height: 100%;
margin-top: 0.8%;
background-color: #13072e;
}
.chart1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
width: 30%;
background-color: #13072e;
}
.chart2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
width: 30%;
background-color: #13072e;
}
.bargraph{
Expand All @@ -511,6 +516,12 @@ input[type="text"] {
margin-left: 0.8%;

}
.compare h2{
font-size: 1.8em;
font-weight: bold;
margin: 0.3%;
margin-left: 0.8%;
}
.mybargraph{
width: 100%;
height: 100%;
Expand Down
38 changes: 32 additions & 6 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ async function getArtist(url_temp) {
.then(response => response.json())
.then(data => {
const output = document.querySelector(".output");
output.style.visibility = "visible";
output.innerHTML =
`<div class="artist_profile">
<div class="artist_img"></div>
Expand Down Expand Up @@ -154,7 +155,7 @@ async function getArtist(url_temp) {
labels: [artist_name, 'Others'],
datasets: [{
data: [data.popularity, 100-data.popularity], // Values for each slice
backgroundColor: ['#9cd8fe', '#4c3a32']
backgroundColor: ['white', '#092D36']
}]
};

Expand All @@ -167,6 +168,8 @@ async function getArtist(url_temp) {
.catch(error => {
console.error('Error fetching artist data:', error);
});
const srch = document.querySelector(".search");
srch.style.marginBottom = "10%";
}).then(()=>{
accessToken().then((token)=>{
var url2 = url + '/top-tracks?market=US';
Expand Down Expand Up @@ -216,7 +219,21 @@ compare_btn.addEventListener('click', function(){
if(artist1.value && artist2.value){
var val1 = artist1.value;
var val2 = artist2.value;
if(val1.includes("https://open.spotify.com/artist/")){
if(val1.includes("https://open.spotify.com/artist/") && val2.includes("https://open.spotify.com/artist/")){
popularity(val1, document.querySelector("#cmprout"), "chart1", data1).then((result)=>{
return popularity(val2, document.querySelector("#cmprout"), "chart2", data1);
});
}else if(val1.includes("https://open.spotify.com/artist/") && !val2.includes("https://open.spotify.com/artist/")){
popularity(val1, document.querySelector("#cmprout"), "chart1", data1).then((result)=>{
return getArtisturl(val2);
}).then((result)=>{
popularity(result, document.querySelector("#cmprout"), "chart2", data1);
});
}else if(!val1.includes("https://open.spotify.com/artist/") && val2.includes("https://open.spotify.com/artist/")){
getArtisturl(val1).then((result)=>{
popularity(result, document.querySelector("#cmprout"), "chart1", data1);
return popularity(val2, document.querySelector("#cmprout"), "chart2", data1);
})
}else{
const output = document.querySelector("#cmprout");
artist1url = getArtisturl(val1);
Expand Down Expand Up @@ -267,33 +284,42 @@ async function popularity(url_inp, x, y, arr){
}else{
x.removeChild(document.querySelector(".chart2"));
x.removeChild(document.querySelector(".chart1"));
x.removeChild(document.querySelector("h2"));
document.querySelector(".bargraph").removeChild(document.querySelector(".mybargraph"));
markechart(data.popularity, x, y, data.name);
arr = storedata(data.name, data.followers.total, arr);
}
const cmpr = document.querySelector(".compare");
cmpr.style.marginBottom = "2.5%";
});
return ret;
});
return ret;
}

function markechart(popularity, x, y, name){
x.style.visibility = "visible";
const chart = document.createElement('div');
chart.className = y;
x.appendChild(chart);
const chk = document.querySelector("h2");
//chart creation
if(!chk){
const h1 = document.createElement('h2');
h1.innerHTML = "Popularity Comparison";
x.appendChild(h1);
}
chart.innerHTML = `
<h1>${name}</h1>
<canvas id="${y}" width="100%" height="100%"></canvas>
<h3 style="margin-top:1%">Popularity in Spotify</h3>`;
<canvas id="${y}" width="50%" height="50%"></canvas>`;
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']
backgroundColor: ['white', '#092D36']
}]
};

Expand All @@ -318,7 +344,7 @@ function makegraph(arr){
bargraph.className = "mybargraph";
document.querySelector(".bargraph").appendChild(bargraph);
bargraph.innerHTML = `
<h2>Followers</h2>
<h2>Followers Comparison</h2>
<canvas id="myBarChart" width="50px" height="25px"></canvas>`;
var ctx = document.getElementById('myBarChart').getContext('2d');
var myBarChart = new Chart(ctx, {
Expand Down

0 comments on commit 492a775

Please sign in to comment.