Skip to content

Playlist Assessment #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OldboyJ wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Playlist Assessment #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 images/division_bell.jpg → images/the_division_bell.jpg
View file
Open in desktop
File renamed without changes
53 changes: 48 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,56 @@
<head>
<meta charset="utf-8">
<title></title>
<!--CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!--CSS link -->
<link rel="stylesheet" href="style.css">

<!--Jquery Bootstrap -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>


</head>
<body>
<select name="my_select" style="height: 40px; line-height: 100px;">
<option name="reggae"> Select your genre </option>
<option name="reggae"> Reggae </option>
<option name="blues"> Blues </option>
</select>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-a">

</div>

</div>
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-md-6 col-b-left">
<h2>Track Bin</h2>
<a href="playlist.html">
<button id="select_tracks"class="btn btn-primary" name="button">Choose Tracks</button>
</a>
</div>
<!-- RIGHT COLUMN -->
<div class="col-md-6 col-b-right">

</div>

</div>
<div class="row">
<div class="col-md-12 col-a">
<p>&copy;Jose Sandate</p>
</div>

</div>

</div>




<script src="script.js">

</script>
</body>
</html>
86 changes: 86 additions & 0 deletions playlist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!--CSS link -->
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!--Jquery Bootstrap -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>


</head>
<body>
<div class="container-fluid">
<!-- TOP ROW -->
<div class="row">
<div class="col-md-12 top-border">
<span>Click an Album to add its contents to the bin</span>
</div>
</div>
<!-- SECOND ROW -->
<div class="long_box">
<div class="inner_long_box">
<div class="album_cover">
<img class="playlist" src="images/21.jpg" alt="">
</div>
<div class="album_cover">
<img class="playlist" src="images/the_division_bell.jpg" alt="">
</div>
<div class="album_cover">
<img class="playlist" src="images/ghost_in_the_machine.jpg" alt="">
</div>
<div class="album_cover">
<img class="playlist" src="images/red.jpg" alt="">
</div>
<div class="album_cover">
<img class="playlist" src="images/thriller.jpg" alt="">
</div>

</div>
</div>



<!-- THIRD ROW -->
<div class="row">
<div class="col-md-12 main-section">
<div class="row">
<div class="col-md-8 offset-md-2">

</div>



</div>
</div>
</div>
<!-- FOURTH ROW -->
<div class="row">
<div class="col-md-12">
<button id="empty_tracks"class="btn btn-primary" name="button">clear tracks</button>
<button id="submit_bin"class="btn btn-primary" name="button">submit bin</button>
</div>
</div>
<!-- FIFTH ROW -->
<div class="row">
<div class="col-md-12 bottom-border">
<span>&copy;Jose Sandate</span>
</div>
</div>

</div>




<script src="script.js"></script>
</body>
</html>
75 changes: 75 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
$(document).ready(function(){

// var musicData = [];


// SPLASH PAGE FUNCTIONALITY //

$.getJSON('https://lit-fortress-6467.herokuapp.com/object', function(data){
// console.log("data: ",data.Search);
var artists = data.results;

for (var i = 0; i < 3; i++) {
var artistPic = artists[Math.floor(Math.random() * artists.length)]
// console.log(artists[Math.floor(Math.random() * artists.length)]);
$('.col-b-right').append(`
<div class="row">
<div class="col-md-6 offset-md-3">
<img src="images/${artistPic.cover_art}">
</div>
</div>
`)

}

// PLAYLIST PAGE FUNCTIONALITY //

$('img').click(function(){
var artistInfo = $(this).attr('src');
// console.log(artistInfo);
// console.log('images/'+artists[0].cover_art);
for (var i = 0; i < artists.length; i++) {

if(artistInfo === 'images/' + artists[i].cover_art){
$('.col-md-8').append('<div>'+ artists[i].artist + ": " +
artists[i].title + '</div>');
}
}

})
// EMPTYING THE BIN //

$('#empty_tracks').click(function(){
$('.col-md-8').empty();
});








}); // API Ending

// POST
$('#submit_bin').click(function(){

$.post( "https://lit-fortress-6467.herokuapp.com/post")
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})


})







}) // Document Ending
Loading