diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6e8a46a Binary files /dev/null and b/.DS_Store differ diff --git a/21.jpg b/21.jpg new file mode 100644 index 0000000..1b18041 Binary files /dev/null and b/21.jpg differ diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..0294fc2 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/scripts/app.js b/assets/scripts/app.js new file mode 100644 index 0000000..fbdb331 --- /dev/null +++ b/assets/scripts/app.js @@ -0,0 +1,58 @@ +const baseURL = 'https://lit-fortress-6467.herokuapp.com/object' + +const carousel = document.querySelector('.carousel'); +const albumDetails = document.querySelector('.album-details'); +/* +{id: 2, title: "Ghost in the Machine", artist: "The Police", cover_art: "ghost_in_the_machine.jpg"}, +{id: 6, title: "Red", artist: "Black Uhuru", cover_art: "red.jpg"}, +{id: 22, title: "The Division Bell", artist: "Pink Floyd", cover_art: "the_division_bell.jpg"}, +{id: 18, title: "Thriller", artist: "Michael Jackson", cover_art: "thriller.jpg"}, +{id: 55, title: "21", artist: "Adele", cover_art: "21.jpg"}; +*/ +//console.log(obj); + +//API Request +fetch(baseURL) + // once we have our data clean it up for us + .then(function(res) { + + // turn readable stream into json (javascript object notation) + return res.json(); + }) + // once data is turned into json do something else + .then(function(jsonData) { +//console.log(jsonData); +let newObj = jsonData.results; +console.log(newObj); + + + /* albumDetails.innerHTML = '

jsonData}

'; + + 0 +: +{id: 2, title: "Ghost in the Machine", artist: "The Police", cover_art: "ghost_in_the_machine.jpg"} +1 +: +{id: 6, title: "Red", artist: "Black Uhuru", cover_art: "red.jpg"} +2 +: +{id: 22, title: "The Division Bell", artist: "Pink Floyd", cover_art: "the_division_bell.jpg"} +3 +: +{id: 18, title: "Thriller", artist: "Michael Jackson", cover_art: "thriller.jpg"} +4 +: +{id: 55, title: "21", artist: "Adele", cover_art: "21.jpg"} +*/ + +for (let k in newObj) { + console.log(newObj[k]); + +const info = document.createElement('div'); +info.className ="album-info"; +info.innerHTML = newObj[k].title; +albumDetails.appendChild(info); + +} + + }); diff --git a/css/page2.css b/css/page2.css new file mode 100755 index 0000000..c5e9a89 --- /dev/null +++ b/css/page2.css @@ -0,0 +1,133 @@ +html, container{ +margin:0; +padding:0; +width:100%; + + +} + +main, footer{ + width:798px; + margin:0 auto; + height:35px; +} + +main { +height:454px; +overflow-x: auto; +display:flex; +align-items: center; +flex-direction:column; + +} + +container{ + display:flex; + flex-direction:row; + align-items: stretch; +justify-content: center; justify-content:space-between; justify-content:space-around; +justify-content:space-evenly; + flex-flow: row wrap; +} + +.carousel, .discography{ + border:2px solid #000; + height:90px;width:790px; + overflow-x: scroll; +overflow-y: hidden; +white-space: nowrap; +flex: 0 0 auto; +overflow-x: visible; +overflow-x: hidden; +overflow-x: scroll; +overflow-x: auto; +/* +justify-content: space-around; + justify-content: space-between; + overflow-y: hidden; + overflow-y: hidden; + margin:5px; + width:160px; + height:160px; +*/ +} + +.album-details{ + border:2px solid #000; + height:160px;width:700px; + background-color:#ccc; +} +/* +.left-col{ + z-index:1; + width:47%; + background-color:#ccc; + +} +*/ +.separator{ + width:798px; +height:40px; +} + +.button-container{ +width:700px; +} + +input[type = "button"] { + width:150px; + background-color:#333; + color:#fff; + height:40px; + border-radius:5px; + font-size:1.1em; + font-family:Avenir; + position:relative; + top: 10px; + left:0%; + font-weight:lighter; + letter-spacing: 1px; +} + + +navbar{ + + background-color:#686859; + height:110px; + width:798px; + +} + + +.slogan{ + position:relative; + top:70px; + font-size:1.6em; + padding:6px; + font-weight:lighter; + font-family:Avenir; + color:#fff; + + +} + +footer{ +background-color:#686859; + height:35px + +} + +footer #copyright{ + + padding-top:7px; + margin-left:35px; + color:#fff; + font-family:Avenir; + letter-spacing:2px; + font-weight:lighter; +} + +@font-face { + font-family: 'Avenir'; + src: url('../fonts/AvenirNextLTPro-Regular.otf'); +} diff --git a/css/playlist.css b/css/playlist.css new file mode 100644 index 0000000..fbf48a0 --- /dev/null +++ b/css/playlist.css @@ -0,0 +1,143 @@ +html, container{ +margin:0; +padding:0; +width:100%; + + +} + +main, footer{ + width:798px; + margin:0 auto; + height:35px; +} + +main { +height:454px; +overflow-x: auto; +display:flex; +align-items: center; +flex-direction:column; + +} + +container{ + display:flex; + flex-direction:row; + align-items: stretch; +justify-content: center; justify-content:space-between; justify-content:space-around; +justify-content:space-evenly; + flex-flow: row wrap; +} + +.carousel { +margin-top:10px; +justify-content: space-around; +justify-content: space-between; + overflow-x: scroll; +overflow-y: hidden; +white-space: nowrap; +display:flex; +flex: 0 0 auto; +overflow-x: visible; +overflow-x: hidden; +overflow-x: scroll; +overflow-x: auto; +/* +justify-content: space-around; + justify-content: space-between; + overflow-y: hidden; + overflow-y: hidden; + margin:5px; + width:160px; + height:160px; +*/ +} + +img.slider{ + height:60px;width:60px; + + padding: 0 15px 0 15px; +} + + +.album-details{ + border:2px solid #000; + height:160px;width:700px; + background-color:#ccc; +} +/* +.left-col{ + z-index:1; + width:47%; + background-color:#ccc; + +} +*/ +.separator{ + width:798px; +height:40px; +} + +.button-container{ +width:700px; +} + +input[type = "button"] { + width:150px; + background-color:#333; + color:#fff; + height:40px; + border-radius:5px; + font-size:1.1em; + font-family:Avenir; + position:relative; + top: 10px; + left:0%; + font-weight:lighter; + letter-spacing: 1px; +} + + +navbar{ + + background-color:#686859; + height:110px; + width:798px; + +} + + +.slogan{ + position:relative; + top:70px; + left:30px; + font-size:1.6em; + padding:6px; + font-weight:lighter; + font-family:Avenir; + color:#fff; + + +} + +footer{ +background-color:#686859; + height:35px + +} + +footer #copyright{ + + padding-top:7px; + margin-left:35px; + color:#fff; + font-family:Avenir; + letter-spacing:2px; + font-weight:lighter; +} + +@font-face { + font-family: 'Avenir'; + src: url('../fonts/AvenirNextLTPro-Regular.otf'); +} diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..5c29426 --- /dev/null +++ b/css/style.css @@ -0,0 +1,151 @@ +html, container{ +margin:0; +padding:0; +width:100%; + + +} + +main, footer{ + width:798px; + margin:0 auto; + height:35px; +} + +main { +height:510px; +display:flex; + + +} + +container{ + display:flex; + flex-direction:column; + align-items: stretch; +justify-content: center; justify-content:space-between; justify-content:space-around; +justify-content:space-evenly; + flex-flow: row wrap; + +} + +.left-col{ + + width:49%; + background-color:#eeeeee; + border:0; +} + +.right-col{ + width:51%; + background: url('../images/Track.jpg') 0 -9px; + background-size: cover; + +border:0; + +background-color:#eeeeee; + +} + +main{ + +} + +.bin{ + margin-right:00px; + color:#4c0066; + font-family:Avenir; + letter-spacing:1.5px; + font-weight:100; + font-size:49px; + position:relative; + top:36%; left:24%; + z-index: 0; +} + +input[type = "button"] { + width:180px; + background-color:#333; + color:#fff; + height:40px; + border-radius:6px; + font-size:1.2em; + font-family:Avenir; + position:relative; + top: 195px; + left:24%; + font-weight:100; + letter-spacing: 1px; +} + + +navbar{ + background-color:#686859; + height:35px; + width:798px; +} + +footer{ +background-color:#686859; + height:35px +} + +footer #copyright{ + padding-top:7px; + margin-left:35px; + color:#fff; + font-family:Avenir; + letter-spacing:2px; + font-weight:lighter; +} + +.images-sidebar{ + display:flex; + flex-direction:column; + align-items:center; + justify-content: space-around; + justify-content: space-between; + overflow-y: hidden; + overflow-y: hidden; + content: ' '; + border:none; + + +} + + + +img.role-preview, img.discography{ + justify-content: space-around; + justify-content: space-between; + overflow-y: hidden; + overflow-y: hidden; + margin:5px; + width:170px; + height:160px; + +} + + +@font=face{ + font-family: Avenir; + src: url('fonts/AvenirNextLTPro-Regular.otf'); +} + + +.img-preview{ + + display:flex; + flex-direction:column; + align-items:center; + justify-content: space-around; + justify-content: space-between; + overflow-y: hidden; + overflow-y: hidden; + z-index:3; + background-color:#fff; + opacity:.9; + background-size:cover; + + +} diff --git a/ghost_in_the_machine.jpg b/ghost_in_the_machine.jpg new file mode 100644 index 0000000..aff06be Binary files /dev/null and b/ghost_in_the_machine.jpg differ diff --git a/resources/fadedTrack.jpg b/images/fadedTrack copy.jpg similarity index 100% rename from resources/fadedTrack.jpg rename to images/fadedTrack copy.jpg diff --git a/images/fadedTrack.jpg b/images/fadedTrack.jpg new file mode 100644 index 0000000..4ef81d7 Binary files /dev/null and b/images/fadedTrack.jpg differ diff --git a/images/ghost_in_the_machine copy.jpg b/images/ghost_in_the_machine copy.jpg new file mode 100644 index 0000000..aff06be Binary files /dev/null and b/images/ghost_in_the_machine copy.jpg differ diff --git a/images/track.jpg b/images/track.jpg new file mode 100644 index 0000000..5365660 Binary files /dev/null and b/images/track.jpg differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 8e0abfd..04945a1 --- a/index.html +++ b/index.html @@ -1,11 +1,47 @@ - - - - - - - - - - - + + + + + + + + + + + + +
+ +
+
track bin
+ +
+ +
+
+ +
+
+ +
+
+ + + + diff --git a/page2.html b/page2.html new file mode 100644 index 0000000..148dff3 --- /dev/null +++ b/page2.html @@ -0,0 +1,51 @@ + + + + + + + + + + + +
click an album to add it's tracks to the bin
 +
+ +
+ +
+
+
+
+ +
+ + +
+
+ + + + diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..7a10a49 --- /dev/null +++ b/playlist.html @@ -0,0 +1,49 @@ + + + + + + + + + + +
click an album to add it's tracks to the bin
 +
+ +
+ +
+
+
+
+ +
+ + +
+
+ + + + + + diff --git a/random_images.html b/random_images.html new file mode 100644 index 0000000..476838a --- /dev/null +++ b/random_images.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/red.jpg b/red.jpg new file mode 100644 index 0000000..b092f9e Binary files /dev/null and b/red.jpg differ diff --git a/test.html b/test.html new file mode 100755 index 0000000..ba992ab --- /dev/null +++ b/test.html @@ -0,0 +1,42 @@ + + + + + + + + + + +
+ five + + + + + + + + diff --git a/the_division_bell.jpg b/the_division_bell.jpg new file mode 100644 index 0000000..9dd63b3 Binary files /dev/null and b/the_division_bell.jpg differ diff --git a/thriller.jpg b/thriller.jpg new file mode 100644 index 0000000..d103338 Binary files /dev/null and b/thriller.jpg differ