From f8ac383620f260e104e05687b61ad92e6e5c48a5 Mon Sep 17 00:00:00 2001 From: jlstafford Date: Fri, 14 Jul 2017 10:02:48 -0700 Subject: [PATCH 1/2] html and css mostly complete --- README.md | 82 ++++++++++++-------------- index.html | 31 ++++++++-- javascript.js | 9 +++ playlists.html | 44 ++++++++++++++ style.css | 155 +++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 271 insertions(+), 50 deletions(-) create mode 100644 javascript.js create mode 100644 playlists.html create mode 100644 style.css diff --git a/README.md b/README.md index 8d2b067..2b95103 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 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 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. +* 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 acheives 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/index.html b/index.html index 8e0abfd..057edaf 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,33 @@ - + + Album Picker + + + +
- - +
+
+
+

track bin

+ +
+
+
+
railroad tracks from above
+
+
+
+
+
+ - + diff --git a/javascript.js b/javascript.js new file mode 100644 index 0000000..9577f5b --- /dev/null +++ b/javascript.js @@ -0,0 +1,9 @@ +$(document).ready(function() { + // function set_body_height() { // set body height = window height + // $('body').height($(window).height()); + // } + // $(document).ready(function() { + // $(window).bind('resize', set_body_height); + // set_body_height(); + // }); +}) diff --git a/playlists.html b/playlists.html new file mode 100644 index 0000000..247b7a4 --- /dev/null +++ b/playlists.html @@ -0,0 +1,44 @@ + + + + + + Album Picker + + + + +
+

click an album to add its tracks to the bin

+
+ +
+
+ +
+
+
+ + +
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..0cec53b --- /dev/null +++ b/style.css @@ -0,0 +1,155 @@ +* { + padding: 0; + margin: 0; +} + +html, body { + background-color: #EEEEEE; + width: 100%; + height: 100%; +} + +header { + background-color: #9A9B8D; + height: 45px; + border-bottom: 2px solid black; +} + +.playlist-header { + background-color: #9A9B8D; + height: 105px; +} + +.playlist-header-text { + color: #EEEEEE; + padding-left: 35px; + padding-top: 60px; + font-size: 30px +} + +#container { + display: flex; +} + +.playlist-page { + display: flex; + flex-direction: column; +} + +.left-column, .right-column { + height: calc(100vh - 45px); + width: 50%; +} + +.left-column { + display: flex; + justify-content: center; + align-items: center; +} + +.playlist-page { + height: calc(100vh - 45px); +} + +.scroll { + background-color: #FFFFFF; + overflow-x: auto; + width: 100%; + -webkit-overflow-scrolling: touch; +} + +.scroll nav { + height: 15vh; + width: 100%; + display: flex; + flex-wrap: nowrap; + flex-direction: row; +} + +.item { + flex: 0 0 auto; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 5px 10px; +} + +.selected { + display: flex; + height: 30vh; + margin: 25px; + width: 90%; + align-items: center; + border: 4px solid black; + background-color: #EEEEEE; + justify-content: flex-start; + align-self: center; +} + + +h1 { + color: #6E5073; + font-size: 45px; +} + +button { + border: 0; + border-radius: 5px; + padding: 6px 28px; + font-size: 20px; + color: #EEEEEE; + background-color: #343428; +} + +.image { + height: inherit; + width: 50vw; + position: absolute; + opacity: 0.25; + z-index: 1; +} + +.right-column { + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.card { + width: 250px; + height: 250px; + margin: 10px 0; +} + +.action { + display: flex; + margin: 0 61px; +} + +.submit { + margin-left: 10px; +} + +img { + width: inherit; + height: inherit; + /*opacity: 1;*/ + z-index: 2; +} + +footer { + background-color: #67675B; + color: #EEEEEE; + height: 45px; + display: flex; + align-items: center; +} + +footer p { + margin: 0; + padding: 0 50px; + font-size: 20px; + box-sizing: border-box; +} From ac74f589d8dd46ba6db01febc38970c40d77d9f2 Mon Sep 17 00:00:00 2001 From: jlstafford Date: Fri, 14 Jul 2017 15:00:45 -0700 Subject: [PATCH 2/2] assessment time complete --- ...ivision_bell.jpg => the_division_bell.jpg} | Bin index.html | 9 +- javascript.js | 78 ++++++++++++++++-- jquery-2.2.4.min.js | 4 + playlists.html | 21 ++--- style.css | 30 ++++++- 6 files changed, 115 insertions(+), 27 deletions(-) rename images/{division_bell.jpg => the_division_bell.jpg} (100%) create mode 100644 jquery-2.2.4.min.js 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 057edaf..502b5eb 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> +
@@ -17,14 +18,14 @@

track bin

- +
railroad tracks from above
-
-
-
+
+
+