Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@RyanAncheta
RyanAncheta authored Jun 26, 2024
1 parent 25d661d commit 47fe644
Show file tree
Hide file tree
Showing 7 changed files with 688 additions and 327 deletions.
303 changes: 215 additions & 88 deletions app.html
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,240 @@
<!DOCTYPE html>
<!-- /*****************************************************************************
* ITC5202 Final Project
* We declare that this assignment is our own work in accordance with Humber Academic
* Policy.
*
* Group: Ryan Phil Fermin Ancheta, Jercy Tze Sie Tiong, Roger Paredes Date: 12/07/2023
*
ITC5202: XML and JavaScript
*****************************************************************************/ -->
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Spotify APP</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"><!-- not using a css file for now, but it would be best if we add further styles so we can work simultaneusly -->
<style>
.left-frame {
min-height: 100vh;
border-right: 1px solid rgb(27, 88, 255);
}

.right-frame {
min-height: 100vh;
background-color: #464646;
}

h1{
font-weight: bold;
}

</style>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="endpointsRoger.js" defer type="module"></script>
<script src="endpointsRyanAndJercy.js" defer type="module"></script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<!-- Left Frame for Buttons -->
<div class="col-md-3 left-frame">
<h1 class="mt-4 mb-5">Cool Spotify APP</h1>

<!-- Buttons to get endpoints -->

<div class="input-group">
<input type="text" class="form-control" id="search-input" placeholder="Artist, album, or track">

<select id="searchType" name="searchType" aria-labelledby="dropdownMenuButtonDark">
<option value="artist">Artist</option>
<option value="album">Album</option>
<option value="track">Song</option>
</select>
<button class="btn btn-primary" id="buttonSearch">Search</button>
</div>
<hr>

<button id="buttonUser" class="btn btn-primary">Display User</button>
<br><br>
<button id="buttonFollowers" class="btn btn-primary">Get Artists Followed</button>
<br><br>
<button id="buttonFav" class="btn btn-primary">Get Favorite Artists</button>
<br><br>
<button id="buttonPlaylist" class="btn btn-primary">Get Playlists</button>
<br><br>



<div class="play-group">
<!-- Replace the text content with an image tag for the play button -->
<button class="btn btn-success mb-3" id="buttonPlay">
<img src="p.png" alt="Play" width="25px" />
</button>

<!-- Replace the text content with an image tag for the pause button -->
<button class="btn btn-success mb-3" id="buttonPause">
<img src="pa.png" alt="Pause" width="25px"/>
</button>

<!-- Replace the text content with an image tag for the seek button -->
<button class="btn btn-success mb-3" id="buttonSeek">
<img src="ten.png" alt="Seek" width="25px"/>
</button>
</div>


<br><br>
<button id="buttonDevelopers" class="btn btn-primary">Get Developers</button>

</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 left-frame">
<h1 class="mt-4 mb-5">Cool Spotify APP</h1>

<div class="home-button" id="homeButton">
<img src="home.png" alt="Home">
<span>Home</span>
</div>
<hr>

<!-- Right Frame for Results -->
<div class="col-md-9 right-frame">
<div class="input-group">
<input type="text" class="form-control" id="search-input" placeholder="Artist, album, or track">
<select id="searchType" name="searchType" class="form-select">
<option value="artist">Artist</option>
<option value="album">Album</option>
<option value="track">Song</option>
</select>
<button class="btn btn-primary" id="buttonSearch">Search</button>
</div>
<div class="library-placeholder" id="libraryPlaceholder"></div>
<hr>
</div>

<div class="col-md-9 right-frame">
<div class="container mt-5">
<div class="user-greeting">
<h1 id="greeting"></h1>
<div id="buttonUser"><img src="user_icon.png" id="userImage" alt="User Image"></div>
</div>

<div class="container mt-5">
<h2>Endpoint Results:</h2>
<div id="result">
<div id="result2"></div>
<h2>Popular Artists</h2>
<div id="popular-artists" class="artist-section"></div>
<h2>Followed Artists</h2>
<div id="followed-artists" class="artist-section"></div>
</div>

</div>
</div>
</div>
</div>
</div>

<div class="player-controls">
<button class="btn btn-success" id="buttonPlay">
<img src="p.png" id="play" alt="Play">
</button>
<button class="btn btn-success" id="buttonPause">
<img src="pa.png" id="pause" alt="Pause">
</button>
<button class="btn btn-success" id="buttonSeek">
<img src="ten.png" id="seek" alt="Seek">
</button>
</div>

<script>
function getAccessToken() {
const hash = window.location.hash.substring(1);
const params = new URLSearchParams(hash);
return params.get('access_token');
}

$(document).ready(function () {
const accessToken = getAccessToken();
if (!accessToken) {
alert('Access token not found. Please log in again.');
window.location.href = 'index.html'; // Redirect to your login page
return;
}

function fetchUserProfile() {
let url = 'https://api.spotify.com/v1/me';
$.ajax({
url: url,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
console.log(result);
if (result.images && result.images.length > 0) {
let userImageUrl = result.images[0].url;
$('#userImage').attr('src', userImageUrl);
}
$('#greeting').text(`Hi, ${result.display_name}`);
},
error: function () {
alert('Failed to fetch user profile!');
}
});
}

function fetchUserLibrary() {
let url = 'https://api.spotify.com/v1/me/playlists';
let container = $('#libraryPlaceholder');
container.empty(); // Clear previous results

function getPlaylists(url) {
$.ajax({
url: url,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
console.log(result);
if (result.items && result.items.length > 0) {
result.items.forEach(function (playlist) {
let playlistName = playlist.name;
let playlistImageUrl = playlist.images && playlist.images.length > 0 ? playlist.images[0].url : '';
let playlistElement = `
<div class="playlist-item">
<img src="${playlistImageUrl}" alt="${playlistName}" width="64" height="64">
<p>${playlistName}</p>
</div>
`;
container.append(playlistElement);
});

// Check if there are more playlists to fetch
if (result.next) {
getPlaylists(result.next);
}
}
},
error: function () {
alert('Failed to fetch user library!');
}
});
}

getPlaylists(url);
}

function fetchFollowedArtists() {
let url = 'https://api.spotify.com/v1/me/following?type=artist';
let container = $('#followed-artists');
container.empty(); // Clear previous results

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
function getArtists(url) {
$.ajax({
url: url,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
console.log(result);
if (result.artists && result.artists.items && result.artists.items.length > 0) {
result.artists.items.forEach(function (artist) {
let artistName = artist.name;
let artistImageUrl = artist.images && artist.images.length > 0 ? artist.images[0].url : '';
let artistElement = `
<div class="artist-card">
<img src="${artistImageUrl}" alt="${artistName}">
<p>${artistName}</p>
<p>Followers: ${artist.followers.total}</p>
<p>Genres: ${artist.genres.join(', ')}</p>
</div>
`;
container.append(artistElement);
});

// Check if there are more artists to fetch
if (result.artists.next) {
getArtists(result.artists.next);
}
}
},
error: function () {
alert('Failed to fetch followed artists!');
}
});
}

getArtists(url);
}

function fetchFavoriteArtists() {
let url = 'https://api.spotify.com/v1/me/top/artists';
let container = $('#popular-artists');
container.empty(); // Clear previous results

$.ajax({
url: url,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
console.log(result);
if (result.items && result.items.length > 0) {
result.items.forEach(function (artist) {
let artistName = artist.name;
let artistImageUrl = artist.images && artist.images.length > 0 ? artist.images[0].url : '';
let artistElement = `
<div class="artist-card">
<img src="${artistImageUrl}" alt="${artistName}">
<p>${artistName}</p>
<p>Followers: ${artist.followers.total}</p>
<p>Genres: ${artist.genres.join(', ')}</p>
</div>
`;
container.append(artistElement);
});
}
},
error: function () {
alert('Failed to fetch favorite artists!');
}
});
}

fetchUserProfile();
fetchUserLibrary();
fetchFollowedArtists();
fetchFavoriteArtists();

$('#homeButton').on('click', function () {
location.reload(); // Refresh the page
});
});

</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
17 changes: 14 additions & 3 deletions endpointsRoger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,36 @@ $(document).ready(function(){
};
let accessToken = $.urlParam("access_token");




/////User info Endpoint
$('#buttonUser').on('click', function(){
let url = `https://api.spotify.com/v1/me`;

$.ajax({
url: url,
headers: {
Authorization: "Bearer " + accessToken,
},

success: function(result) {
console.log(result);
$("#result").html("<br>" + result.display_name + "<br>" + "Country: " + result.country + "<br><br>");
if (result.images && result.images.length > 0) {
let userImageUrl = result.images[0].url;


$("#result").html("<br><img src=" + userImageUrl + " width=200 height=200>" + "<br>" + result.display_name + "<br>" + "Country: " + result.country + "<br><br>");
$("#result").append(`<br>`)
$("#result").append(`<button id="buttonTracks" class="btn btn-primary" >${result.display_name} Top Track</button>`)

$("#buttonTracks").on('click', function() {
console.log("getTopTrack called");
getTopTrack();
});
$("#result").append(`<br>`)
$("#result").append(`<br>`)
$("#result").append(`<br>`)
}

},
error: function() {
Expand Down Expand Up @@ -287,7 +298,7 @@ $('#buttonFav').on('click', function(){

if(searchType == 'artist'){
if (response.artists && response.artists.items.length > 0) {
let resultTitle = $("<h3>").html( " Artists search results: ");
let resultTitle = $("<h3>").html( " Artists search results: ");
resultsContainer.append(resultTitle);
let artists = response.artists.items;

Expand Down
Loading

0 comments on commit 47fe644

Please sign in to comment.