diff --git a/README.md b/README.md index 8d2b067..d7a4be6 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,23 @@ -# Playlist Quarter One Assessment +# Playlist Quarter One Assessment -## Objective: +## Objective: Following the general design of the mockups, you will be making a playlist app that allows you to pull album images and artist names from an api, select the albums to add from the list, and then submitting your album selections via a POST request to an external api. -## Scope: +## Scope: This assessment is one whole project divided into several 'modules'. Each module isolates certain aspects of the job that can be tracked in your pivotal tracker. Your first job is to create user stories for each of the tasks in your current module. For this exercise, you can be both the owner and the assignee of each task. ## Functionality Walkthrough -A user comes to the splash page. The splash page has 3 album covers to the right that are pulled randomly from the API. When the user clicks the 'select tracks' button, they are taken to the playlist page. The playlist page has a scrolling div that contains all of the album covers in the api. +A user comes to the splash page. The splash page has 3 album covers to the right that are pulled randomly from the API. When the user clicks the 'select tracks' button, they are taken to the playlist page. The playlist page has a scrolling div that contains all of the album covers in the api. -## REPO: +## REPO: https://github.com/gSchool/playlist -## Getting Credit: -There's a pull request target for every single stage of the project. When finished with that stage, deploy current working code base to firebase and submit a pull request to the designated target. - +## Getting Credit: +There's a pull request target for every single stage of the project. When finished with that stage, deploy current working code base to firebase and submit a pull request to the designated target. -## General Notes + +## General Notes * Behind the scenes, when each album cover is appended to the scrolling div in the dom, the containing div is given a unique id that comes from the object in the api. @@ -26,83 +26,73 @@ There's a pull request target for every single stage of the project. When finish * The album div, when added, COULD look like this: ```
``` -* When the user clicks on an album container div, the album is added to the album list. +* When the user clicks on an album container div, the album is added to the album list. ## Design Notes - The font used for the titles on both pages ( for example "track bin" and "click an album to add its tracks to the bin" ) is Avenir. Font matching is NOT required, but the Avenir font is included in the repo. Look up "how to use any font with CSS3" and you'll find some good resources . - Note that the railroad track image is NOT opaque. Unless you edit it with an image editor, you should use CSS opacity to achieve 19% opacity so it can match the mockup -- Remember that we can use z-index to place certain images "above" others . This may help when you're placing random album covers over the railroad tracks. -- Scrolling divs can have scrollbars that are hidden unless you need them. You should be able to look this up. +- Remember that we can use z-index to place certain images "above" others . This may help when you're placing random album covers over the railroad tracks. +- Scrolling divs can have scrollbars that are hidden unless you need them. You should be able to look this up. -## Mockups: -SPLASH PAGE: -(3 album images need to be randomly selected from API) +## Mockups: +SPLASH PAGE: +(3 album images need to be randomly selected from API) ![](https://raw.githubusercontent.com/Nmuta/playlist/master/mockups/splash_page.png) -PLAYLIST PAGE: +PLAYLIST PAGE: ![](https://raw.githubusercontent.com/Nmuta/playlist/master/mockups/playlist_page.png) -## APIs: -A user will hit this api to get all of the albums: +## 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 -## Stretch 1: -Create a new API ( it can be a json file posted to a static deployment target) that contains YOUR personal favorite albums and accopmanying images. +## Stretch 1: +Create a new API ( it can be a json file posted to a static deployment target) that contains YOUR personal favorite albums and accopmanying images. -## Stretch 2: -Building on stretch one, create new functionality where a user can click on an album and get all of the tracks on that album, and then the user is able to add only certain tracks from that album. This will require a modification to the album object that is being served through the API. See mockup: -![](https://raw.githubusercontent.com/gSchool/playlist/master/mockups/playlist_stretch2.fw.png) +## Stretch 2: +Building on stretch one, create new functionality where a user can click on an album and get all of the tracks on that album, and then the user is able to add only certain tracks from that album. This will require a modification to the album object that is being served through the API. See mockup: +![](https://raw.githubusercontent.com/gSchool/playlist/master/mockups/playlist_stretch2.fw.png) -# MODULES: -Add the following stories to the Pivotal Tracker, complete the work, deploy to firebase, and submit a pull request to https://github.com/gSchool/playlist_module_[module_number] +# MODULES: +Add the following stories to the Pivotal Tracker, complete the work, deploy to firebase, and submit a pull request to https://github.com/gSchool/playlist_module_[module_number] For example, if you just completed module 3, submit a pull request to https://github.com/gSchool/playlist_module_3 ## Module 1: STRUCTURE AND CSS -* As a user, when I visit the spash page, I should see a page whose general layout matches the design mockup [excluding dynamic content] +* As a user, when I visit the spash 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 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 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. +* As a user, when I click "choose tracks" on the splash page, it takes me to the playlist page. ## Module 2: APIs -* As a developer, when I submit a get request on the home page [https://lit-fortress-6467.herokuapp.com/object ] , I receive data and I am able to choose 3 random album image URLs from the data received. +* As a developer, when I submit a get request on the home page [https://lit-fortress-6467.herokuapp.com/object ] , I receive data and I am able to choose 3 random album image URLs from the data received. -* As a developer, when I submit a get request on the playlist page [ https://lit-fortress-6467.herokuapp.com/object ] , I receive data and I am able to get all of the data . +* As a developer, when I submit a get request on the playlist page [ https://lit-fortress-6467.herokuapp.com/object ] , I receive data and I am able to get all of the data . -* As a developer, in a sandbox environment, I am able to make a POST request to the [ https://lit-fortress-6467.herokuapp.com/post ] receive a response, and log data from the response. +* As a developer, in a sandbox environment, I am able to make a POST request to the [ https://lit-fortress-6467.herokuapp.com/post ] receive a response, and log data from the response. ## Module 3: DOM Manipulation v1 -* As a user, when I visit the home page, I see 3 random album covers vertically stacked according to the specs shown in the mockup. +* As a user, when I visit the home page, I see 3 random album covers vertically stacked according to the specs shown in the mockup. * As a user, when I visit the playlist page, I see a div populated with all of the albums in the album list retrieved from the API. ## Module 4: DOM Manipulation v2 -* As a developer, when I iterate through the album results, I wrap each image in a div with a unique id that matches the id of each image object, and I append that div to the playlist div, OR I do something else that acheives the same result. +* As a developer, when I iterate through the album results, I wrap each image in a div with a unique id that matches the id of each image object, and I append that div to the playlist div, OR I do something else that achieves the same result. ## Module 5: Accumulate and POST * As a developer, when my playlist is completed, I have accumulated all of the album (or track ) names in a collection -* As a developer, when I send my collection via POST request to the POST API: https://lit-fortress-6467.herokuapp.com/post , I receive and log a response to the console. - - - - - - - - - - +* As a developer, when I send my collection via POST request to the POST API: https://lit-fortress-6467.herokuapp.com/post , I receive and log a response to the console. diff --git a/app.js b/app.js new file mode 100644 index 0000000..bba55b5 --- /dev/null +++ b/app.js @@ -0,0 +1,87 @@ +$(function(){ + // Text for bottom Nav + $('#bottomNavBar').append('

Thomas Elkins 2017

').css("color", "rgb(226,226,223)") + +// Add railroad picture to splash right +$('.transparentImgContainer').append('') + +//Add text and buttons to splash left +$('.splashLeft').append('
') +$('#splashText').append('

track bin

').css("text-align", "center") +$('.splashLeft').append('
') +$('#chooseTracksButton').append('

choose tracks

').css("color", "white",) + +// Button function direct to Playlist page +$('#chooseTracksButton').click(function(){ + window.location.href='playlistPage.html'; +}) + + +//Add text and containers to playlistPage +$('#playlistNav').append('
') +$('#playlistNavText').append('

click an album to add its tracks to the bin

') +$('#playlistButtonContainer').append('
') +$('#clearTracksButton').append('

clear tracks

').css("color", "white",) +$('#playlistButtonContainer').append('
') +$('#submitBinButton').append('

submit bin

').css("color", "white",) + +// // global data +// var getData = $.get("https://lit-fortress-6467.herokuapp.com/object"); +// var allData = [] +// getData.done(function(e) { +// if (getData.status !== 200) return; +// for (var i = 0; i < e["results"].length; i++) { +// allData.push(e["results"][i]); +// } +// }) + +// Get request on homepage + +var splashArt = []; +$.get("https://lit-fortress-6467.herokuapp.com/object", function(data){ + var albumArr = data["results"]; + for (var i = 0; i < albumArr.length; i++){ + splashArt.push(albumArr[i]["cover_art"]) + } + // Shuffle order of album array + function shuffleArray(array) { + for (var i = array.length - 1; i > 0; i--) { + var j = Math.floor(Math.random() * (i + 1)); + var temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + return array; +} +// Add random images over railroad image +var shuffledArt = shuffleArray(splashArt); +var splashArtOne = shuffledArt[0]; +var splashArtTwo = shuffledArt[1]; +var splashArtThree = shuffledArt[2]; +$('.transparentImgContainer').append('') +$('.transparentImgContainer').append('') +$('.transparentImgContainer').append('') + +//End get request +}) + +// Second page album population +$.get("https://lit-fortress-6467.herokuapp.com/object", function(e){ + var results = e["results"]; + for (var i = 0; i < results.length; i++){ + var albumID = results[i]["id"] + var art = results[i]["cover_art"] + $('#albumNavBar').append('
') + $('#'+albumID+'').append('') + } +// // Add album to list on click +// $('.artWrapper').click(function(){ +// var clickedOn = this.id +// console.log(e["results"]) +// }) + //End get request +}) + + +//End load function +}) 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 8e0abfd..67687f3 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,20 @@ - + + + + Splash - - +
+
+
+
+
+
diff --git a/playlistPage.html b/playlistPage.html new file mode 100644 index 0000000..a05c7a4 --- /dev/null +++ b/playlistPage.html @@ -0,0 +1,22 @@ + + + + + + + + Playlist + + +
+
+
+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..6a1a840 --- /dev/null +++ b/style.css @@ -0,0 +1,187 @@ +@font-face { + font-family: 'myFont'; + src: url('myFont.eot'); + src: url("fonts/AvenirNextLTPro-Regular.otf") format:("opentype"); +} +/*full main page*/ +#splashContainer { +height: 100vh; +width: 100vw; +background-color: rgb(238,238,238); +z-index: -1; +} + +.topNav { + background-color: rgb(155,155,141); + width: 100%; + height: 50px; + border-bottom: 2px solid; + border-color: black; +} + +.bottomNav { + background-color: rgb(104,104,90); + width: 100%; + height: 50px; + border-top: 2px solid; + border-color: black; + position: fixed; + bottom: 0; +} +/*container for railroad img*/ +.transparentImgContainer { + height: 100vh; + width: 50vw; + float: right; +} +/*Set railroad image and position random album images*/ +#railroadImg { + width: inherit; + height: inherit; + opacity: .19; + z-index: -1; +} +#splashOne { + position: absolute; + height: 210px; + width: 210px; + right: 17%; + top: 10%; +} +#splashTwo { + position: absolute; + height: 210px; + width: 210px; + right: 17%; + top: 40%; +} +#splashThree { + position: absolute; + height: 210px; + width: 210px; + right: 17%; + top: 71% +} +/*container for middle left splash page*/ +.splashLeft { + height: 100vh; + width: 50vw; + float: left; +} + +#splashText { + color: rgb(70,26,95); + margin-top: 25vh; + font-family: 'myFont'; +} +#chooseTracksButton { + width: 12vw; + height: 50px; + background-color: rgb(53,53,40); + border-radius: 5px; + margin-left: auto; + margin-right: auto; + cursor: pointer; +} +#chooseTracksButtonText { + position: relative; + float: left; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/*Top Nav Bar Playlist Page*/ + +#playlistNav { + background-color: rgb(155,155,141); + width: 100%; + height: 125px; +} + +#playlistContainer { + height: 100vh; + width: 100vw; + background-color: rgb(255,255,255); + z-index: -1; +} + +#playlistNavText { + color: rgb(239,239,236); + position: relative; + padding-top: 70px; + padding-left: 75px; +} + +#albumNavBar { + background-color: rgb(255,255,255); + width: 100%; + height: 125px; + overflow: scroll; +} + +#albumBox { + width: 90%; + height:210px; + margin-left: auto; + margin-right: auto; + background-color: rgb(238,238,238); + border: 2px solid; + border-color: black; +} +#playlistButtonContainer{ + width: 90%; + height:100px; + margin-left: auto; + margin-right: auto; +} + +#clearTracksButton { + display: inline-block; + position: relative; + width: 20vw; + height: 40px; + background-color: rgb(53,53,40); + border-radius: 5px; + margin-top: 10px; + +} +#clearTracksButtonText { + position: relative; + float: left; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#submitBinButton { + display: inline-block; + position: relative; + width: 20vw; + height: 40px; + background-color: rgb(53,53,40); + border-radius: 5px; + margin-top: 10px; + margin-left: 15px; + +} +#submitBinButtonText { + position: relative; + float: left; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.artWrapper { + display: inline-block; + margin-top: 10px; + margin-left: 50px; + height: 100px; + width: 100px; +} +.albums { + position: relative; + height: inherit; + width: inherit; + float: left; +}