First Quarter Assessment

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 = '<p>jsonData}</p>';
+
+  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);
+
+}
+
+  });

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');
+}

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');
+}