diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..658e2de Binary files /dev/null and b/.DS_Store differ diff --git a/images/division_bell.jpg b/images/division_bell.jpg deleted file mode 100644 index 9dd63b3..0000000 Binary files a/images/division_bell.jpg and /dev/null differ diff --git a/index.html b/index.html index b82dcc4..527ec46 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,55 @@ + - + + - - - - - - + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ track bin
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+
+ diff --git a/playlistpage.html b/playlistpage.html new file mode 100644 index 0000000..3b0ad2c --- /dev/null +++ b/playlistpage.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
click an album to add its tracks to the bin
+
+ +
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+ + + + +
+
+
+ + +
+
+
+
+ +
+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7583030 --- /dev/null +++ b/script.js @@ -0,0 +1,44 @@ + +/* Module 1: STRUCTURE AND CSS +* As a user, when I visit the splash page, I should see a page whose general layout matches the design mockup [excluding dynamic content] +* As a user, when I visit the splash page, I should see a railroad track with 19% opacity on the right hand side. +* As a user, when I visit the playlist page, I should see a page whose general layout matches the design mockup [excluding dynamic content] +* As a user, when I click "choose tracks" on the splash page, it takes me to the playlist page. */ + +/*## APIs: +A user will hit this api to get all of the albums: +https://lit-fortress-6467.herokuapp.com/object + +A user will send a POST request to this api to send the playlist when completed. https://lit-fortress-6467.herokuapp.com/post*/ + + +$( document ).ready(function() { + var albCovers = []; + $.getJSON('https://lit-fortress-6467.herokuapp.com/object/',function(data){ + while(albCovers.length < 3){ + var rand = Math.floor(Math.random() * data['results'].length); + var covers = albCovers.indexOf(data['results'][rand]['cover_art']); + if(albCovers.indexOf(data['results'][rand]['cover_art']) === -1){ + albCovers.push(data['results'][rand]['cover_art']); + } + } + for (var i=0; i< albCovers.length; i++){ + $("#albumPhoto").append(` +
+
+
+ +
+
6
+
+ `) + } + for (var i=0; i< data.results.length; i++) { + $("#albumlist").append('') + + } + //$("#details")=(data.results.name) + + + }) +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..5430841 --- /dev/null +++ b/style.css @@ -0,0 +1,129 @@ +.container { + border-top: 30px solid #9a9b84; + +} +.col-borderR { + background-image: url('/Users/ccordova/Documents/galvanize/mar 06 albums exercise/resources/track.fw.png'); + background-position: center; + background-size:500px 900px; + background-repeat: repeat-y; + opacity: 0.81; + filter: alpha(opacity=50); +} + +#choose { + color: white; + background-color: black; + border:3px solid black; + border-radius: 10%; + width: 150px; + height: 40px; + +} + +#track_bin { + align-items: center; + font-family: Avenir,Avenir,serif; + font-size: 42px; + color: purple; +} + +.playlistcontainer { + border-top: 50px solid #9a9b84; + border-bottom: 30px solid #9a9b84; + text: 16px; + text-indent: 22px; +} + +#albumlist { + align-items: center; + margin-bottom: 30px; + +} +#albumlist img { + margin: 20px; + height: 130px; + width: 130px; + display: inline-block; +} + +.col-borderL { + background-position: center; +} + + + + +} +.panel { + margin: 15px; + align-items: center; +} + +#toprow { + padding-top: 15vh; + background-color: #9a9b84; + font-family: Avenir; + font-weight: normal; + color: white; + font-size: 25px; +} + +#footer { + padding: 1vh; + text-indent: 2%; + background-color: #9a9b84; + font-family: Avenir; + font-weight: normal; + color: white; + font-size: 15px; + height:15%; + +} + +/*<.row { + height:200px; +}*/ + +#details { + border: 2px solid black; + border-radius: 2%; + height: 30vh; + margin-bottom:30px; +} +#scroll { + border: 1px solid black; + height: 2vh; + margin-bottom:6vh; + +} + +#buttons { + margin-bottom: 60px; + color:white; +} + +// This container element gives us the scrollbars we want. +div.horizontal { + width: 100%; + height: 400px; + overflow: auto; + border: 1px solid black; +} + +// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want. +.table { + display: table; + table-layout: fixed; + width: 100%; +} + +// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too. +article { + width: 400px; + height: 400px; + display: table-cell; + background: #e3e3e3; + vertical-align: middle; + text-align: center; +}