diff --git a/app.js b/app.js new file mode 100644 index 0000000..91044de --- /dev/null +++ b/app.js @@ -0,0 +1,58 @@ +//getting the object data through API call +$.get("https://lit-fortress-6467.herokuapp.com/object").done(function(data) { + var music = data.results; + //to shuffle the object .sort(function(){return 0.5 - Math.random()}); + var sorter = music.sort(function() { + return 0.5 - Math.random(); + }); + //creating an array of album cover images and an array of artist and album names from the shuffled object + var covers = []; + var artistAlbum = []; + for (var i = 0; i < music.length; i++) { + covers.push("images/" + music[i].cover_art); + artistAlbum.push(music[i].title + " by " + music[i].artist); + } + console.log(artistAlbum); + //on the splash page, adding shuffled images over railroad track + $('.first_album').append(""); + $('.second_album').append(""); + $('.third_album').append(""); + //allows the select track button to take you to the playlist page + $('.track_button').click(function() { + window.location.href = 'playlist.html'; + }); + //add album covers to the playlist page + $('.album_1').append(""); + $('.album_2').append(""); + $('.album_3').append(""); + $('.album_4').append(""); + $('.album_5').append(""); + //all of these click functions allow the album cover to be clicked and add the album and artist info to the text area. + $('.album_1').click(function() { + $('.track_list').append(artistAlbum[0] + "
"); + }); + $('.album_2').click(function() { + $('.track_list').append(artistAlbum[1] + "
"); + }); + $('.album_3').click(function() { + $('.track_list').append(artistAlbum[2] + "
"); + }); + $('.album_4').click(function() { + $('.track_list').append(artistAlbum[3] + "
"); + }); + $('.album_5').click(function() { + $('.track_list').append(artistAlbum[4] + "
"); + }); + //this button clears the tracks from the track list + $('.clear_tracks').click(function() { + $('.track_list').empty(); + }) + //this button submits the info and then emptys the track list + $('.submit_button').click(function() { + var tracksubmission = $('.track_list').val(); + $.post("https://lit-fortress-6467.herokuapp.com/post", tracksubmission, function(data) { + alert("you did it. you actually did it."); + $('.track_list').empty(); + }) + }); +}) diff --git a/images/division_bell.jpg b/images/the_division_bell.jpg similarity index 100% rename from images/division_bell.jpg rename to images/the_division_bell.jpg diff --git a/index.html b/index.html index b82dcc4..f051053 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,62 @@ - + SPLASH + + + + + + + + + + + + - +
+
+
+
+
+
+
+
track bin
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..f7c7253 --- /dev/null +++ b/playlist.html @@ -0,0 +1,53 @@ + + + + + SPLASH + + + + + + + + + + + + + +
+
+
+ click an album to add its tracks to the bin +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+ + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..620daf9 --- /dev/null +++ b/style.css @@ -0,0 +1,172 @@ +body{ + margin: 0px auto; +} + +.container-fluid{ + padding: 0px; + width: 100vw; + height: 100vh; +} +.row{ + float: right; + position: relative; + height: 200px; + width: 100%; + margin:0px auto; + text-align: center; +} + +.album_playlist{ + margin-top: 20px; + float: left; + height: 100%; + width: 200px; + margin-left: 30px; + margin-right: 20px; +} +.album_playlist img{ + padding-left: 20px; + height: 150px; +} +.playlist_row{ + height: 150px; + width: 100%; +} + +.album{ + position: relative; + float: right; + height: 100%; + width: 100%; + margin: 0px auto; + padding: 20px; +} + +.album img{ + height: 230px; + padding: 20px; +} + + +header{ + height: 50px; + background-color: #9B9B8D; + width: 100%; + color: #ffffff; +} + +#playlist{ + height: 100px; +} + +.heady{ + padding-top: 60px; + padding-left: 20px; + font-family: AR; + font-size: 32px; +} + + + +main{ + height: 100%; + width: 100%; +} + + +.track_list{ + font-size: 20px; + background-color: #EEEEEE; + margin: 60px auto; + height: 200px; + width: 1000px; + border: 2px solid black; +} + +footer { + padding: 5px; + width: 100%; + background-color: #9B9B8D; + color: white; + position: fixed; + bottom: 0px; + height: 50px; +} + +.footy{ + margin-left: 10px; +} + +#left_section{ + height: 100%; + width: 40%; + float: left; + background-color: #EEEEEE; + overflow: scroll; +} + +.album_box{ + opacity: .4; + position: absolute; + height: 100%; + width: 100%; + background-size: 757px 685px; + overflow: scroll; + background-image: url("/Users/racecarpenter/Projects/Week04/playlist/resources/track.jpg"); +} + +#right_section{ + float: right; + height: 100%; + width: 60%; +} + + +.track_box{ + padding-top: 250px; + margin: 0px auto; + width: 100%; + background-color: #EEEEEE; + height: 80%; + text-align: center; + overflow: scroll; +} +@fontface{ + font-family: AR; + src: url(/Users/racecarpenter/Projects/Week04/playlist/fonts/AvenirNextLTPro-Regular.otf); +} +.track_text{ + width: 300px; + margin: 0px auto; + font-family: AR; + color: purple; + font-size: 60px; +} +.track_button{ + width: 220px; + height: 50px; + background-color: #353527; + font-family: AR; + color: #B7B7B2; + border-radius: 20px; +} +.clear_tracks{ + margin-left: 150px; + margin-bottom: 100px; + width: 220px; + height: 50px; + background-color: #353527; + font-family: AR; + color: #B7B7B2; + border-radius: 20px; +} + +.submit_button{ + margin-bottom: 100px; + width: 220px; + height: 50px; + background-color: #353527; + font-family: AR; + color: #B7B7B2; + border-radius: 20px; +}